html - 中间框可滚动的垂直布局（不是位置：绝对）

Question

我需要一些看起来很常见的东西：

+-----------+
|  Header   |
+-----------+
|          ^|
|          ||
|  Scroll  ||
|          ||
|          v|
+-----------+
|  Footer   |
+-----------+

但问题是，我的标题可以换行，因此它的高度可以改变。所以我不能用于position: absolute布局页面和任何其他标题大小固定且先验已知的页面。我使用 设计了一个解决方案，display: table但它在每个浏览器中看起来都不同，并且只能在 Chrome 中按预期工作。

我需要做些什么来适应 FF 和 IE9？

链接（仅在 chrome 中工作）

这是按顺序排列的图片：FF、IE、Chrome（ok）

我的版本：FF (20.0.1), IE (9.0.8112.16421 64bit), Chrome (26.0.1410.64 m)

Answer 1

你想要overflow-y: scroll。

工作示例：

演示

Answer 2

将 overflow-y:scroll 添加到您的内容 div 以进行滚动，并将 max-height 添加到标题。这可能对您的查询有所帮助：请参见此处：fiddle

.header{
    max-height: 100px;
}
.content {
  height: 400px;
  background-color: yellow;
  overflow-y: scroll;
}