Html 中间框可滚动的垂直布局（非位置：绝对）

我需要一些看起来很普通的东西：

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

但问题是，我的头可以卷起，所以它的高度可以改变。所以我不能使用

position:absolute

来布局页面和任何其他页眉大小固定且先验已知的页面。我用

display:table

设计了一个，但它在每个浏览器中看起来都不一样，只在Chrome中按预期工作

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

下面是按顺序排列的图片：FF，IE，镀铬（ok）

---

我的版本：FF（20.0.1）、IE（9.0.8112.16421 64位）、Chrome（26.0.1410.64米）

您需要的

overflow-y:scroll

工作示例：

---

添加overflow-y：滚动到内容div以进行滚动，并将最大高度添加到标题。这可能有助于您的查询： 请看这里：

---

在FF上不起作用：（在IE9上，当标头换行时，它会向下扩展：（无法确认：它在FF ESR 10.0.11和FF ESR 17.0.4以及IE 9.0.8112.16421（Windows 7 64位）上起作用）我在我的帖子中添加了图片。这个问题可能很有意思，但Flexbox需要IE10+：。如果你不需要在不支持它的浏览器中滚动，你就能在大多数浏览器中得到你想要的东西。@cimmanon这很完美……但我需要IE9:（是的，如果你能通过绝对位置，这将是很简单的，但现在这是一个相当大的谜…在你的例子中，布局高度并没有被保留。

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