让div占用100%的正文高度，减去固定高度的页眉和页脚
让div占用100%的正文高度，减去固定高度的页眉和页脚
提问于 2013-02-22 18:07:50
从我的研究来看，这似乎是一个绝对经典的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，并且让答案在不同的浏览器之间是防弹的。
回答 7
Stack Overflow用户
回答已采纳
发布于 2013-02-22 20:02:14
这个版本可以在所有最新的浏览器和ie8中工作，如果你有现代版的脚本(如果不是只需要把header和footer改成div)：
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
Stack Overflow用户
发布于 2013-02-22 18:45:03
只要它不是跨浏览器解决方案，您就可以利用calc(expression)来实现这一点。
html, body {
height: 100%;
}
header {
height: 50px;
background-color: tomato
}
#content {
height: -moz-calc(100% - 100px); /* Firefox */
height: -webkit-calc(100% - 100px); /* Chrome, Safari */
height: calc(100% - 100px); /* IE9+ and future browsers */
background-color: yellow
}
footer {
height: 50px;
background-color: grey;
}如果你想了解更多关于calc(expression)的信息，你最好访问this站点。
Stack Overflow用户
发布于 2015-06-17 02:11:26
当我试图找到这个问题的答案时，这仍然是谷歌的最高搜索结果。我不需要在我的项目中支持更老的浏览器，我觉得我在flex-box中找到了一个更好、更简单的解决方案。下面的CSS代码片段就是所需的全部内容。
我还展示了如果屏幕高度太小，如何使主要内容可滚动。
html,
body {
height: 100%;
display: flex;
flex-direction: column;
}
header {
min-height: 60px;
}
main {
flex-grow: 1;
overflow: auto;
}
footer {
min-height: 30px;
}<body style="margin: 0px; font-family: Helvetica; font-size: 18px;">
<header style="background-color: lightsteelblue; padding: 2px;">Hello</header>
<main style="overflow: auto; background-color: lightgrey; padding: 2px;">
<article style="height: 400px;">
Goodbye
</article>
</main>
<footer style="background-color: lightsteelblue; padding: 2px;">I don't know why you say, "Goodbye"; I say, "Hello."</footer>
</body>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15021573
复制相关文章
相似问题