根据我的研究，这似乎是一个绝对经典的 CSS 问题，但我找不到明确的答案 - 所以 StackOverflow 就是这样。
如何设置内容 div 占据正文高度的 100%，减去固定高度页眉和页脚所占据的高度？
<body>
<header>title etc</header>
<div id="content">body content</div>
<footer>copyright etc</footer>
</body>
//CSS
html, body {
height: 100%;
}
header {
height: 50px;
}
footer {
height: 50px;
}
#content {
height: 100% of the body height, minus header & footer
}
我想使用纯CSS，并且答案在浏览器之间是无懈可击的。
如果您有 Modernizr 脚本，此版本将在所有最新的浏览器和 ie8 中运行（如果不只是更改header and footer into divs):
Fiddle
html,
body {
min-height: 100%;
padding: 0;
margin: 0;
}
#wrapper {
padding: 50px 0;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#content {
min-height: 100%;
background-color: green;
}
header {
margin-top: -50px;
height: 50px;
background-color: red;
}
footer {
margin-bottom: -50px;
height: 50px;
background-color: red;
}
p {
margin: 0;
padding: 0 0 1em 0;
}
<div id="wrapper">
<header>dfs</header>
<div id="content">
</div>
<footer>sdf</footer>
</div>
滚动内容：Fiddle
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
