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

            padding:;

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

            padding:;

        }

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

        }

巴特西

div上中下布局中间自适应

最新文章

热门文章