我正在寻找一种方法，使包含主页内容的 div 在添加页眉和页脚后能够自动扩展以适应剩余空间。HTML 页面的布局如下：
<div id="wrapper">
<div id="header-wrapper">
<header>
<div id="logo-bar"></div>
</header>
<nav></nav>
</div>
<div id="content"></div>
</div>
<div id="footer-wrapper">
<footer></footer>
</div>
通过将#wrapper的最小高度设置为100％，设计使页脚始终超出页面底部。问题是#content不会扩展以填充# wrapper内部的空白空间，这使得难以获得我想要的外观。如何能做到这一点？
编辑：
为什么不使用顶部和底部。以下是完整示例。
您可以调整顶部和底部值，以优化页眉/页脚的位置。
<html>
<head>
<style type="text/css">
BODY {
margin: 0;
padding: 0;
}
#wrapper {
position: relative;
height: 100%;
width: 100%;
}
#header-wrapper {
position: absolute;
background-color: #787878;
height: 80px;
width: 100%;
}
#content {
position: absolute;
background-color: #ababab;
width: 100%;
top: 80px;
bottom: 50px;
}
#footer-wrapper {
position: absolute;
background-color: #dedede;
height: 50px;
width: 100%;
bottom: 0;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header-wrapper">
<div id="header">
<div id="logo-bar">Logo</div>
</div>
<div id="nav"></div>
</div>
<div id="content">Content</div>
<div id="footer-wrapper">
<div id="footer">Footer</div>
</div>
</div>
</body>
</html>
一篇关于页脚的好文章可以在A List Apart找到：http://www.alistapart.com/articles/footers/
它展示了如何通过扩展内容div来将页脚定位在底部的实际例子。
<style>
#container {
position: relative;
height: 100%;
}
#footer {
position: absolute;
bottom: 0;
}
</style>
</HEAD>
<BODY>
<div id="container">
<h1>Some heading</h1>
<p>Some text you have</p>
<br>
<br>
<div id="footer"><p>Rights reserved</p></div>
</div>
</BODY>
</HTML>
div上同时使用top和bottom属性会导致 IE6 和 IE7/8 在怪异模式下出现问题。不知道 OP 是否想支持这些浏览器。 - Marcel Korpel