固定页眉和页脚，同时保持内容自适应高度并可以滚动？

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

- Orange Kid

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

我希望这可以帮助你：

- Senad Meškin

Answer 2

#header,
#footer {
    width:100%;
    height:20px;
    background:#ccc;
    position:fixed
}

#header {top:0}
#footer {bottom:0}

html, body {height:100%}

纯CSS，无JS :)

- Faraz Kelhini

Answer 3

这取决于您所说的“固定”。如果您的意思是始终在页面上，则：

#header, #footer { position: fixed; height 150px; }
#content { margin: 150px 0px; }

任何背景都应该放在body元素上。

如果您的意思是在内容底部或顶部，那么您只需要一个粘性页脚。

如果您的意思是标题和页脚是自动高度，并且您希望它们始终在页面上的固定位置，则需要使用jQuery，因为没有易于跨浏览器解决方案。

$('#content').css({marginTop: $('#header').outerHeight(), marginBottom: $('#footer').outerHeight() });

- LoveAndCoding