更新
使用display:flex
可以在现代浏览器(2015年以后)中简单地实现:
html,
body {height:100%; padding:0; margin:0; width:100%;}
body {display:flex; flex-direction:column;}
#main {flex-grow:1;}
header {min-height:50px; background:green;}
#main {background:red;}
footer {min-height:50px; background:blue;}
<header>header</header>
<div id="main" role="main">content</div>
<footer>footer</footer>
上述方法允许固定高度的页眉和页脚(只需在样式中添加高度),以及可变高度的页眉和页脚(如当前所示-可以根据页眉和页脚的内容而更改),其中内容占据其余空间。
如果内容超过文档长度,页脚将被向下推。
旧帖子:
有几种使用纯css实现此操作的方法。 基本上,您需要从以下html结构开始:
<div id="wrapper">
<div class="top"></div>
<div class="middle">
<div class="container">
</div>
</div>
<div class="bottom"></div>
</div>
第一版使用border-box,因此不兼容较旧的浏览器(您可能需要添加moz,webkit和ms前缀以在所有浏览器上运行):
html,
body { height: 100%; margin: 0; padding: 0; }
#wrapper { padding: 100px 0 75px 0; height: 100%; box-sizing: border-box; }
.middle { min-height: 100%; position: relative; }
.top { margin-top: -100px; height: 100px; }
.bottom { margin-bottom: -75px; height: 75px; }
.container { padding: 10px; }
版本 1
带内容的版本 1
版本 1 居中列
版本 2 使用绝对定位,跨浏览器兼容性更好:
html,
body {min-height:100%; padding:0; margin:0;}
#wrapper {padding:50px 0; position:absolute; top:0; bottom:0; left:0; right:0;}
.middle {min-height:100%;}
.top {margin-top:-50px; height:50px;}
.bottom {margin-bottom:-50px; height:50px;}
.container {padding:10px;}
版本 2
内容版 2
居中列版 2
版本 3 对 HTML 进行了一些更改,但如果您的页眉和页脚高度不同,则更加稳健:
<div id="wrapper">
<div class="table">
<div class="top row"><div class="cell"></div></div>
<div class="middle row"><div class="container cell"></div></div>
<div class="bottom row"><div class="cell"></div></div>
</div>
</div>
CSS
html,
body {min-height:100%; padding:0; margin:0;}
#wrapper {position:absolute; top:0; bottom:0; left:0; right:0;}
.table {display:table; width:100%; height:100%;}
.row {display:table-row;}
.cell {display:table-cell;}
.middle {height:100%;}
.container {padding:10px;}
第三版
带有不同高度页眉和页脚的第三版
具有内容的第三版
居中列的第三版