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

Question

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

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

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

所以，按顺序:

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/

不应使用框架。