上下固定中间自适应 - codeing-or-artist-??

使用绝对定位

对这三栏都实现绝对定位，其中中间绝对定位的位置是上下两栏的高度，内容超出则中间部分出现流动条；
代码实现：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>绝对定位实现</title> <style type="text/css">
        html,body,div{
            padding:0;
            margin:0;
        }
        .header{
            position:absolute;
            top:0; /*头部绝对定位位置*/
            height:100px;
            width:100%;
            background: red;
        }
        .footer{
            position:absolute;
            bottom:0;/*尾部绝对定位位置*/
            height:100px;
            width:100%;
            background:yellow;
        }
        .main{
            position:absolute;
            width:100%;
            top:100px; /*中间自适应部分绝对定位位置，top是头部的高度*/
            bottom:100px; /*bottom是尾部的高度*/
            background: #ccc;
            overflow:auto; /*超出的部分，滚动条显示*/
        }
    </style> </head> <body> <div class="container"> <div class="header">我是头部</div> <div class="main"> 我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br> 我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br> 我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br> 我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br> </div> <div class="footer">我是尾部</div> </div> </body> </html>

使用flex布局

还可以使用flex布局实现这一布局，将flex-direction设置为column，定义排列方向为竖排，还需注意的是要定义页面的整体高度为100%

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>flex布局实现</title> <style type="text/css">
        html,body{
            padding:0;
            margin:0;
            height:100%; /*定义页面整体高度为100%，重要*/
        }
        .container{
            display:flex; /*父元素的定义为flex布局*/
            height:100%; /*这里也要定义，重要*/
            width:100%;
            flex-direction: column; /*定义排列方向为竖排*/
        }
        .header{
            height:100px; /*头部固定高度*/
            background: red;
        }
        .footer{
            height:100px; /*尾部固定高度*/
            background: yellow;
        }
        .main{
            background: #ccc;
            flex:1; /*中间分配剩下的所有空间*/
            overflow:auto;
        }
    </style> </head> <body> <div class="container"> <div class="header">我是头部</div> <div class="main"> 我是flex布局实现的中间自适应<br>我是flex布局实现的中间自适应<br> 我是flex布局实现的中间自适应<br>我是flex布局实现的中间自适应<br> 我是flex布局实现的中间自适应<br>我是flex布局实现的中间自适应<br> 我是flex布局实现的中间自适应<br>我是flex布局实现的中间自适应<br> 我是flex布局实现的中间自适应<br>我是flex布局实现的中间自适应<br> 我是flex布局实现的中间自适应<br>我是flex布局实现的中间自适应<br> 我是flex布局实现的中间自适应<br>我是flex布局实现的中间自适应<br> 我是flex布局实现的中间自适应<br>我是flex布局实现的中间自适应<br> 我是flex布局实现的中间自适应<br>我是flex布局实现的中间自适应<br> 我是flex布局实现的中间自适应<br>我是flex布局实现的中间自适应<br> </div> <div class="footer">我是尾部</div> </div> </body> </html>

posted on 2019-09-23 16:08 codeing-or-artist-?? 阅读(378) 评论(0) 编辑收藏举报