固定标题&页脚与自动高度，滚动内容？ [英] Fixed header & footer with auto-height, scrolling content?

问题描述

我想使用一个总是可见的，固定位置的页眉和页脚和一个内容元素来布局网格，该内容元素通过内部的滚动条进行扩展以适应容器高度的其余部分。

I would like to layout a grid with an always-visible, fixed-position header and footer and a content element that expands to fit the remainder of the container's height with a scrollbar inside.

<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填充空格。

I can work this fine and simple if I set a fixed height on #content but in larger resolutions, I want #content to fill out the white space.

另一个警告; #container，#header和#footer的高度未知。

Another caveat; the height on #container, #header, and #footer are unknown.

jQuery是一种可能性。

jQuery is a possibility.

EDIT：这个位适合我，从Senad的答案改编;

function resizeGrid() {
    $("div.items").innerHeight(0);
    $("div.items").innerHeight($(window).height() - $("body").innerHeight() - 22)
}

推荐答案

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

这将帮助你：

I hope this will help you:

这篇关于固定标题&页脚与自动高度，滚动内容？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！