HTML 中灵活的页眉、可滚动正文和页脚

Question

我正在尝试创建一个简单的 HTML 布局，其中有垂直布局的页眉、内容和页脚部分。

页眉和页脚的高度应该是灵活的，由内容决定。

内容部分的高度应该是剩余高度，因此整个布局使用窗口的整个高度。内容部分将是可滚动的。

所以，按顺序：

1. 标题。高度取决于内容高度。没有滚动条。
2. 内容。高度为余数；窗口高度 - （页眉高度 + 页脚高度）。如果需要滚动条（溢出：自动；）
3. 页脚。高度取决于内容高度。没有滚动条。

有很多静态页眉和页脚高度的示例，但我发现没有一个可以处理基于内容的高度。

我尝试过位置为：绝对/相对/固定的普通 div。我已经在几种配置中尝试了带有 display: table/table-row/table-cell 的 div。我什至尝试过使用实际的 .但这些似乎都不起作用。这是众多失败尝试之一： http://jsbin.com/uveloj/15/edit

如果可能的话，我怎样才能在不编写脚本的情况下做到这一点（我宁愿尽可能不依赖 JS）。

Answer 1

如果不使用 JavaScript，我认为这是不可能的。为了获得中间滚动，您希望内容区域必须具有设定的高度。如果页眉和页脚可以动态更改，则在不使用 JavaScript 的情况下无法更新内容区域的高度以适应滚动。但是，如果您只想编写几行 JS，那么这是一个非常简单的布局。我有一个很好的例子给你：

http://jsfiddle.net/rogerblanton/8ctJJ/

框架应该不可以使用。

Answer 2

您考虑过使用框架吗？

Answer 3

我很久以后才遇到这个线程，但发现它很有用。

我发现在一般情况下，你需要考虑边距、边框等。你可以使用 jQuery 的 externalHeight() 函数来帮助：

$(window).resize(function() {
    var windowHeight = $(window).height();
    var headerHeight = $('div#header').outerHeight(true)
    var footerHeight = $('div#footer').outerHeight(true);

    var contentHeight = windowHeight - ( footerHeight + headerHeight );
    var contentMargins = $('div#content').outerHeight(true) - $('div#content').height();
    var contentInnerHeight = contentHeight - contentMargins;

    $('div#content').height(contentInnerHeight);
}).resize();

除了 js 固定内容的高度之外，唯一真正重要的一点是内容的溢出样式可以是滚动或自动。

这是罗杰小提琴的修改示例：

http://jsfiddle.net/nuAmG/1/