css前端头尾部固定，中间内容可滑动

最新推荐文章于 2024-08-27 08:00:47 发布

吃完苹果好睡觉

最新推荐文章于 2024-08-27 08:00:47 发布

阅读量1.1w

点赞数 2

分类专栏：前端文章标签： css 前端

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

直接复制过来了，不好意思啊，测试可用！！转载自：
http://www.cnblogs.com/heyiming/p/5686212.html

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>头尾固定中间高度自适应布局</title>
    <style>
        html, body {
            height:100%;
            margin:0;
            padding:0
        }
        header {
            width:100%;
            height:4rem;
            line-height:4rem;
            background:red;
            position:absolute;
            z-index:5;
            top:0;
            text-align:center;
        }
        #main {
            background:pink;
            width:100%;
            overflow:auto;
            top:4rem;
            position:absolute;
            z-index:10;
            bottom:4rem;
        }
        footer {
            height:4rem;
            line-height:4rem;
            background:yellow;
            width:100%;
            position:absolute;
            z-index:200;
            bottom:0;
            text-align:center;
        }
    </style>
</head>
<body>
<header>固定头部4rem</header>
<div id="main">
    <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>
<footer>固定尾部4rem</footer>
</body>
</html>