获取div占据100％的身高，减去固定高度的页眉和页脚 [英] Get div to take up 100% body height, minus fixed-height header and footer
问题描述
从我的研究，这似乎是一个绝对经典的CSS问题，但我找不到一个确定的答案 - 所以StackOverflow它是。
如何设置内容div占据身高的100％，减去固定高度的页眉和页脚占用的高度？
< body>
< header> title etc< / header>
< div id =content>正文内容< / div>
< footer>版权等< / footer>
< / body>
// CSS
html，body {
height：100％;
}
header {
height：50px;
}
footer {
height：50px;
}
#content {
height：身高的100％，减去标题& footer
}
我想使用纯CSS，跨浏览器。
此版本将适用于所有最新的浏览器和ie8如果你有modernizr脚本$ c> header 和 footer into div s）： http://jsfiddle.net/naqE6/1/
html
strong> < div id =wrapper>
< header> dfs< / header>
< div id =content>
< / div>
< footer> sdf< / footer>
< / div>
css
< pre class =lang-css prettyprint-override>
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;}
滚动内容：http://jsfiddle.net/naqE6/
From my research, this appears to be an absolutely classic CSS question, but I can't find a definitive answer - so StackOverflow it is.
How do I set a content div to take up 100% of the body height, minus the height taken up by a fixed-height header and footer?
<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
}
I would like to use pure CSS, and for the answer to be bulletproof across browsers.
this version will work in all the latest browsers and ie8 if you have the modernizr script (if not just change header and footer into divs): http://jsfiddle.net/naqE6/1/
html
<div id="wrapper">
<header>dfs</header>
<div id="content">
</div>
<footer>sdf</footer>
</div>
css
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;}
Scrolling with content: http://jsfiddle.net/naqE6/
这篇关于获取div占据100％的身高，减去固定高度的页眉和页脚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
