相关网页如下所示：
// The Header //
/* */
/* CONTENT */
/* */
// The footer //
页眉和页脚都有固定的高度。例如，假设两者的高度均为 20px。我需要将内容的高度设置为 100% 减去 40px（页眉 + 页脚高度）。我知道我可以使用 JavaScript 轻松地做到这一点，但如果可能的话，学习如何使用纯 CSS 做到这一点会很酷。
【问题讨论】：
此示例似乎显示了执行此操作的最可靠方法。实际上，它在 IE 中有点问题，因为有时调整大小会出错。 也就是说，当从右下角调整大小并手动进行垂直调整大小时（有时很难做到），页面不会在 IE 中刷新。由于我网页上的其他事件，我遇到了同样的问题，毕竟只是用 JS 修复了它。
http://www.xs4all.nl/~peterned/examples/csslayout1.html
更新：
摘自页面以备将来参考：
/**
* 100% height layout with header and footer
* ----------------------------------------------
* Feel free to copy/use/change/improve
*/
html,body {
margin:0;
padding:0;
height:100%; /* needed for container min-height */
background:gray;
font-family:arial,sans-serif;
font-size:small;
color:#666;
}
h1 {
font:1.5em georgia,serif;
margin:0.5em 0;
}
h2 {
font:1.25em georgia,serif;
margin:0 0 0.5em;
}
h1, h2, a {
color:orange;
}
p {
line-height:1.5;
margin:0 0 1em;
}
div#container {
position:relative; /* needed for footer positioning*/
margin:0 auto; /* center, not in IE5 */
width:750px;
background:#f0f0f0;
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
}
div#header {
padding:1em;
background:#ddd url("../csslayout.gif") 98% 10px no-repeat;
border-bottom:6px double gray;
}
div#header p {
font-style:italic;
font-size:1.1em;
margin:0;
}
div#content {
padding:1em 1em 5em; /* bottom padding for footer */
}
div#content p {
text-align:justify;
padding:0 1em;
}
div#footer {
position:absolute;
width:100%;
bottom:0; /* stick to bottom */
background:#ddd;
border-top:6px double gray;
}
div#footer p {
padding:1em;
margin:0;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS Layout - 100% height</title>
<link rel="stylesheet" type="text/css" href="css/layout1.css" />
</head>
<body>
<div id="container">
<div id="header">
<h1>CSS layout: 100% height with header and footer</h1>
<p>Sometimes things that used to be really simple with tables can still appear pretty hard with CSS. This layout for instance would consist of 3 cells; two with a fixed height, and a third one in the center filling up the remaining space. Using CSS, however, you have to take a different approach.</p>
</div>
<div id="content">
<h2>Min-height</h2>
<p>
The #container element of this page has a min-height of 100%. That way, if the content requires more height than the viewport provides, the height of #content forces #container to become longer as well. Possible columns in #content can then be visualised with a background image on #container; divs are not table cells, and you don't need (or want) the fysical elements to create such a visual effect. If you're not yet convinced; think wobbly lines and gradients instead of straight lines and simple color schemes.
</p>
<h2>Relative positioning</h2>
<p>
Because #container has a relative position, #footer will always remain at its bottom; since the min-height mentioned above does not prevent #container from scaling, this will work even if (or rather especially when) #content forces #container to become longer.
</p>
<h2>Padding-bottom</h2>
<p>
Since it is no longer in the normal flow, padding-bottom of #content now provides the space for the absolute #footer. This padding is included in the scrolled height by default, so that the footer will never overlap the above content.
</p>
<p>
Scale the text size a bit or resize your browser window to test this layout. The <a href="css/layout1.css">CSS file is over here</a>.
</p>
<p>
<a href="../css.html">Back to CSS Examples</a>
</p>
</div>
<div id="footer">
<p>
This footer is absolutely positioned to bottom:0; of #container. The padding-bottom of #content keeps me from overlapping it when the page is longer than the viewport.
</p>
</div>
</div>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
<script type="text/javascript">
_uacct = "UA-472607-1"; urchinTracker();
</script>
</body>
【讨论】：
如果您的浏览器支持 CSS3，请尝试使用 CSS 元素 Calc()
height: calc(100% - 65px);
您可能还想添加浏览器兼容性选项：
height: -o-calc(100% - 65px); /* opera */
height: -webkit-calc(100% - 65px); /* google, safari */
height: -moz-calc(100% - 65px); /* firefox */
【讨论】：
Marnix 的回答涉及使用内容元素的顶部和底部填充；我的涉及使用顶部和底部边框。
我自己偶然发现了这个解决方案，同时试图弄清楚如何在不使用表格的情况下进行类似的操作：将中心元素的高度设置为 100%，然后将 box-sizing 模型设置为“border-box”（这样高度不仅包括盒子内的内容，还包括盒子周围的边框），使顶部和底部边框非常厚（例如，20px），然后使用固定定位覆盖页眉和页脚覆盖在中心元素的超厚顶部和底部边框上。
这是我的示例 CSS：
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#content {
height: 100%;
-moz-box-sizing: border-box;
box-sizing: border-box;
/* Ensure that the height of the element includes the
box border, not just the content */
border: 0;
border-top: 20px solid white;
border-bottom: 20px solid white;
/* Leave some space for the header and footer to
overlay. */
}
#header,
#footer {
position: fixed;
left: 0;
right: 0;
height: 20px;
background-color: #eee;
/* Specify a background color so the content text doesn't
bleed through the footer! */
}
#header {
top: 0;
}
#footer {
bottom: 0;
}
这适用于 Mac 版 Google Chrome 24。不过，我还没有在其他浏览器中尝试过。
希望这将帮助那些仍然面临着只使用表格并完成页面布局的诱惑的其他人。 :-)
【讨论】：
#header /* hypothetical name */
{
height:100%;
}
#header p /* or any other tag */
{
margin:20px 0 20px 0;
}
请确保不要将边距和高度放在同一个标签中。你会体验到一些疯狂的结果。
【讨论】：
position: relative。
在页眉和页脚上放置一个固定位置，并将它们分别设置为粘在窗口底部的顶部。然后在 20px 的内容区域放置一个上下内边距。
#header{position:fixed;top:0}
#footer{position:fixed;bottom:0}
#content{padding:20px 0}
【讨论】：