jquery - 固定页眉和页脚具有自动高度、滚动内容？

Question

我想布局一个网格，其中包含一个始终可见、位置固定的页眉和页脚，以及一个内容元素，该内容元素可以展开以适应容器的剩余高度，并在内部带有一个滚动条。

<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)
}

Answer 1

CSS

#header { position: fixed; top: 0; left: 0; height: 100px; }
#footer { position: fixed; bottom: 0; left: 0; height: 100px; }
#content { margin-top: 100px;

JS

$(document).ready(function(){  
   resizeContent();
  //attach on resize event
   $(window).resize(function() {
       resizeContent();
    });
});
function resizeContent()
{
   $('#content').attr('height', $(window).height() - $('#header').height() - $('#footer').height();
}

希望对您有所帮助: