div上中下布局中間自適應

需求1： 頭尾固定高度，中間自適應

    1.上部（header）Div高度固定100px，寬度100%；

    2.下部（footer）Div高度固定100px，寬度100%；

    3.中部（middle）DIV高度根據屏幕高度，自適應充滿（是根據內容自動填滿），寬度100%；

    4.用純DIV+CSS實現，不采用腳本計算高度的方式；

    5.調整瀏覽器大小時，中部DIV能隨着屏幕高度自適應。

CSS部分

<style type="text/css"> *{ margin:0; padding:0; text-align: center;
        } .container{ background: #fff; margin: 0 auto; text-align: left;
        } .header{ padding: 10px 0; background: pink;
        } .middle{ padding: 10px 0;
        } .footer{ padding: 0px; background:pink;
        } </style>

HTML部分

<div class="container">
    <div class="header">
        <p>heder</p>
    </div>
    <div class="middle">
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
    </div>
    <div class="footer">
        <p>footer</p>
    </div>
</div>

 

需求2：頭部固定，中間和底部設置為絕對定位，

      *{
            margin: 0;
            padding: 0;
        }
      .container{
            text-align: center;
            font-size: 30px;
        }
        .header,.footer{
            width: 100%;
            height: 200px;
            line-height: 100px;
            background-color: red;
        }
        .middle{
            width: 100%;
            position: absolute;
            top: 100px;
            bottom:100px;
            background-color: yellow;
        }
        .footer{
            position: absolute;
            bottom: 0px;
        }