css之页面三列布局之左右上下高度固定，中间自适应

第一种，绝对定位

!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312">
<title>头尾固定中间高度自适应布局</title>
<style>
html, body {
    height:100%;
    margin:0;
    padding:0
}
#dHead {
    height:100px;
    line-height:100px;
    background:#690;
    width:100%;
    position:absolute;
    z-index:5;
    top:0;
    text-align:center;
}
#dBody {
    background:#FC0;
    width:100%;
    overflow:auto;
    top:100px;
    position:absolute;
    z-index:10;
    bottom:100px;
}
.mycontent {
    padding:20px;
}
#dFoot {
    height:100px;
    line-height:100px;
    background:#690;
    width:100%;
    position:absolute;
    z-index:200;
    bottom:0;
    text-align:center;
}
</style>
</head>

<body>
<div id="dHead">固定头部100px;</div>
<div id="dBody">
  <div class="mycontent"> 中间自适应部分<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>
    中间自适应部分<br>
    中间自适应部分<br>
    中间自适应部分<br>
    中间自适应部分<br>
    中间自适应部分<br>
    中间自适应部分<br>
    中间自适应部分<br>
    中间自适应部分<br>
    中间自适应部分<br>
    中间自适应部分<br>
    中间自适应部分<br>
    中间自适应部分<br>
    中间自适应部分<br>
  </div>
</div>
<div id="dFoot">固定尾部100px</div>
</body>
</html>

第二种：flex

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .main-flex{
            display: flex;
            height: 500px;
            flex-direction: column;
        }
        .main-flex .top,.main-flex .bottom{
            height: 60px;
            background: red;
        }
        .main-flex .middle{
            flex: 1;
            background: blue;
        }
    </style>
</head>
<body>
    <div class="main-flex">
        <div class="top">头部</div>
        <div class="middle">
            <p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p>
            <p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p>
            <p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p>
            <p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p>
            
        </div>
        <div class="bottom">尾部</div>
    </div>
</body>
</html>

posted on 2018-03-08 17:13 坚持不懈❥ 阅读(370) 评论(0) 编辑收藏举报