抱歉，搜索返回了大量结果，但没有一个与我的问题完全匹配。似乎 SO 淹没在 div-height 问题中。 :-(
我有以下测试布局:
<!DOCTYPE html>
<html>
<head>
<title>Div Test</title>
<style type="text/css" media="screen">
body {
margin:0;
}
div {
width:100%;
}
.content {
position:relative;
float:none;
margin-left:auto;
margin-right:auto;
display:block;
width:680px;
}
#one {
height:100px;
position:relative;
background-color:#0000FF;
}
#two {
position:relative;
background-color:#00FF00;
height:100%;
min-height:400px;
}
#three {
height:70px;
background-color:#FF0000;
bottom:0;
position:absolute;
}
#oneone {
height:100%;
background-color:#838383;
}
#twotwo {
height:400px;
background-color:#EEFF47;
}
#threethree {
height:100%;
background-color:#400080;
}
</style>
</head>
<body>
<div id="one">
<div class="content" id="oneone"></div>
</div>
<div id="two">
<div class="content" id="twotwo">Expand this to the bottom.</div>
</div>
<div id="three">
<div class="content" id="threethree"></div>
</div>
</body>
</html>
我希望 div 1 和 3 保持在顶部和底部，div twotwo 应该扩展高度以容纳我的页面内容，并在内容超过页面高度时扩展，因此将 div 3 向下推并导致滚动。
如果没有 JavaScript，这可能吗？如果是这样，对此的 CSS 解决方案是什么？ 谢谢!
最佳答案
为此需要 Javascript。当您有页眉和页脚高度并且您希望中间有 100% 高度时，结果将是整页高度 + 页眉高度 + 页脚高度。所以你最终会用滚动条来查看整个页面。如果你想让所有东西都适契约(Contract)一个窗口，那么你需要使用 javascript 来检测剩下多少中间空间并相应地分配高度。
要使用 jQuery 检测中间高度，您可以这样做
var one = $('#one').height(),
three = $('#three').height(),
two = parseInt($(window).height() - three - one);
alert(two);
这将为您提供中间部分的剩余高度 <div id="two">在你的情况下。
请参阅 http://jsfiddle.net/Ppw5y/ 中的 jQuery 代码。 .请注意，当您展开窗口并再次运行代码时，您将拥有不同的内容高度。
关于javascript - 如何扩展div以覆盖剩余页面高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5047532/