根据我的研究，这似乎是一个绝对经典的 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和footer进入divs）：
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>滚动内容： 小提琴
只要它不是跨浏览器解决方案，您可能会利用使用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)您最好访问此站点的信息。
当我试图找到这个问题的答案时，这仍然是谷歌的最高结果。我不必在我的项目中支持旧版浏览器，我觉得我在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>新的现代方法是通过从视口的垂直高度中减去页眉和页脚的高度来计算垂直高度。
//CSS
header {
height: 50px;
}
footer {
height: 50px;
}
#content {
height: calc(100vh - 50px - 50px);
}
试图计算页眉和页脚是不好的:(设计应该简单，不言自明。简单易行。计算只是......不容易。对人类来说不容易，对机器来说有点困难。
您正在寻找的是圣杯设计的一个子集。
这是一个使用 flex 显示的实现。除了页脚和页眉之外，它还包括侧栏。享受：
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset=utf-8 />
<title>Holy Grail</title>
<!-- Reset browser defaults -->
<link rel="stylesheet" href="reset.css">
</head>
<body style="display: flex; height: 100%; flex-direction: column">
<div>HEADER<br/>------------
</div>
<!-- No need for 'flex-direction: row' because it's the default value -->
<div style="display: flex; flex: 1">
<div>NAV|</div>
<div style="flex: 1; overflow: auto">
CONTENT - START<br/>
<script>
for (var i=0 ; i<1000 ; ++i) {
document.write(" Very long content!");
}
</script>
<br/>CONTENT - END
</div>
<div>|SIDE</div>
</div>
<div>------------<br/>FOOTER</div>
</body>
</html>
您可以利用 CSS 属性Box Sizing。
#content {
height: 100%;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
padding-top: 50px;
margin-top: -50px;
padding-bottom: 50px;
margin-bottom: -50px;
}
请参阅JsFiddle。
这是一个不使用负边距或calc. 运行下面的代码片段以查看最终结果。
解释
我们给页眉和页脚一个固定的高度，30px并将它们分别绝对定位在顶部和底部。为了防止内容掉到下面，我们使用了两个类：below-header并above-footer用30px.
所有内容都包含在一个div 中，因此页眉和页脚位于内容position: relative的顶部/底部，而不是窗口。
我们使用类fit-to-parent并使min-fit-to-parent内容填满页面。这为我们提供了一个至少与窗口一样低的粘性页脚，但如果内容长于窗口则隐藏。
在页眉和页脚中，我们使用display: table和display: table-cell样式为页眉和页脚提供一些垂直填充，而不会破坏页面的收缩包装质量。（给他们真正的填充可能会导致页面的总高度超过100%，这会导致滚动条在不需要时出现。）
.fit-parent {
height: 100%;
margin: 0;
padding: 0;
}
.min-fit-parent {
min-height: 100%;
margin: 0;
padding: 0;
}
.below-header {
padding-top: 30px;
}
.above-footer {
padding-bottom: 30px;
}
.header {
position: absolute;
top: 0;
height: 30px;
width: 100%;
}
.footer {
position: absolute;
bottom: 0;
height: 30px;
width: 100%;
}
/* helper classes */
.padding-lr-small {
padding: 0 5px;
}
.relative {
position: relative;
}
.auto-scroll {
overflow: auto;
}
/* these two classes work together to create vertical centering */
.valign-outer {
display: table;
}
.valign-inner {
display: table-cell;
vertical-align: middle;
}<html class='fit-parent'>
<body class='fit-parent'>
<div class='min-fit-parent auto-scroll relative' style='background-color: lightblue'>
<div class='header valign-outer' style='background-color: black; color: white;'>
<div class='valign-inner padding-lr-small'>
My webpage
</div>
</div>
<div class='fit-parent above-footer below-header'>
<div class='fit-parent' id='main-inner'>
Lorem ipsum doloris finding dory Lorem ipsum doloris finding
dory Lorem ipsum doloris finding dory Lorem ipsum doloris
finding dory Lorem ipsum doloris finding dory Lorem ipsum
doloris finding dory Lorem ipsum doloris finding dory Lorem
ipsum doloris finding dory Lorem ipsum doloris finding dory
Lorem ipsum doloris finding dory Lorem ipsum doloris finding
dory Lorem ipsum doloris finding dory Lorem ipsum doloris
finding dory Lorem ipsum doloris finding dory Lorem ipsum
doloris finding dory Lorem ipsum doloris finding dory Lorem
ipsum doloris finding dory Lorem ipsum doloris finding dory
Lorem ipsum doloris finding dory Lorem ipsum doloris finding
dory Lorem ipsum doloris finding dory Lorem ipsum doloris
finding dory Lorem ipsum doloris finding dory Lorem ipsum
doloris finding dory Lorem ipsum doloris finding dory Lorem
ipsum doloris finding dory Lorem ipsum doloris finding dory
Lorem ipsum doloris finding dory Lorem ipsum doloris finding
dory Lorem ipsum doloris finding dory Lorem ipsum doloris
finding dory Lorem ipsum doloris finding dory Lorem ipsum
doloris finding dory Lorem ipsum doloris finding dory Lorem
ipsum doloris finding dory Lorem ipsum doloris finding dory
Lorem ipsum doloris finding dory Lorem ipsum doloris finding
dory Lorem ipsum doloris finding dory Lorem ipsum doloris
finding dory Lorem ipsum doloris finding dory Lorem ipsum
doloris finding dory Lorem ipsum doloris finding dory Lorem
ipsum doloris finding dory Lorem ipsum doloris finding dory
Lorem ipsum doloris finding dory Lorem ipsum doloris finding
dory Lorem ipsum doloris finding dory Lorem ipsum doloris
finding dory Lorem ipsum doloris finding dory Lorem ipsum
doloris finding dory Lorem ipsum doloris finding dory Lorem
ipsum doloris finding dory Lorem ipsum doloris finding dory
Lorem ipsum doloris finding dory Lorem ipsum doloris finding
dory Lorem ipsum doloris finding dory Lorem ipsum doloris
finding dory Lorem ipsum doloris finding dory Lorem ipsum
doloris finding dory Lorem ipsum doloris finding dory Lorem
ipsum doloris finding dory Lorem ipsum doloris finding dory
</div>
</div>
<div class='footer valign-outer' style='background-color: white'>
<div class='valign-inner padding-lr-small'>
© 2005 Old Web Design
</div>
</div>
</div>
</body>
</html>这个问题已经得到了很好的回答，但我冒昧地添加了一个 javascript 解决方案。只需给要“扩展” id 的元素，footerspacerdiv此 javascript 片段将扩展该 div 直到页面占据浏览器窗口的整个高度。
它的工作原理是，当页面小于浏览器窗口的全高时，document.body.scrollHeight 等于 document.body.clientHeight。while 循环增加高度，footerspacerdiv直到 document.body.scrollHeight 大于 document.body.clientHeight。此时，footerspacerdiv实际上会高出 1 个像素，并且浏览器会显示一个垂直滚动条。因此，脚本的最后一行将高度降低了footerspacerdiv一个像素，以使页面高度与浏览器窗口的高度完全一致。
通过放置footerspacerdiv在页面的“页脚”上方，此脚本可用于将页脚“下推”到页面底部，以便在短页面上，页脚与浏览器窗口的底部齐平。
<script>
//expand footerspacer div so that footer goes to bottom of page on short pages
var objSpacerDiv=document.getElementById('footerspacer');
var bresize=0;
while(document.body.scrollHeight<=document.body.clientHeight) {
objSpacerDiv.style.height=(objSpacerDiv.clientHeight+1)+"px";
bresize=1;
}
if(bresize) { objSpacerDiv.style.height=(objSpacerDiv.clientHeight-1)+"px"; }
</script>