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

直接复制过来了,不好意思啊,测试可用!!转载自:
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>

你可能感兴趣的:(css,前端)