修复了具有自动高度，滚动内容的页眉和页脚？

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

 
Header Text
 
 
Content
 
Content
 
Content
 
Content
 
Content
 
Content
 
Content
 
 
Footer Text
  

如果我在#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(); } 

我希望这能帮到您：

Answer 2

 #header, #footer { width:100%; height:20px; background:#ccc; position:fixed } #header {top:0} #footer {bottom:0} html, body {height:100%} 

纯css，没有js 🙂

Answer 3

取决于你的意思固定。 如果您的意思是始终在页面上，那么：

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

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

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

如果您的意思是页眉和页脚是自动高度，并且您希望它们始终位于页面上的固定点，那么您将需要jQuery，因为没有简单的跨浏览器解决方案。

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