我想布置一个网格,其中包括一个始终可见的固定位置的页眉和页脚,并且内容元素会自动扩展以适应容器剩余的高度,并带有内部滚动条。
<div id="container">
<div id="header">Header Text</div>
<div id="content">
<div id="row1">Content</div>
<div id="row2">Content</div>
<div id="row3">Content</div>
<div id="row4">Content</div>
<div id="row5">Content</div>
<div id="row6">Content</div>
<div id="row7">Content</div>
</div>
<div id="footer">Footer Text</div>
</div>
如果在 #content 上设置固定高度,那么它就能很好地工作,但在更大的分辨率下,我希望 #content 能填满白色空间。
另一个问题是; #container、#header 和 #footer 的高度未知。
jQuery 是一种可能性。
编辑:从 Senad 的答案中调整过来的代码可以解决我的问题;
function resizeGrid() {
$("div.items").innerHeight(0);
$("div.items").innerHeight($(window).height() - $("body").innerHeight() - 22)
}