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;
        }