css头尾固定中间高度自适应布局

最新推荐文章于 2023-06-14 15:23:18 发布

啊哈前端

最新推荐文章于 2023-06-14 15:23:18 发布

阅读量988

点赞数

分类专栏： css3

css3 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

<!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>