css - 溢出 :scroll in a table cell - works in Chrome, 在其他任何地方都不起作用

Question

我正试图在一个表格单元格中显示一个滚动条，该表格单元格的内容可能会变得比原始表格单元格的大小更大，而且我不希望整个表格展开。

Here's the example on jfiddle .如您所见，它在 Google Chrome 中有效，但在 Firefox 和 IE 中均无效:它们的行为就像根本没有 overflow:scroll 一样。尚未在 Safari 中尝试过，但我怀疑这也行不通。

那么，谁的错，是 Chrome 实现了不应该支持的功能，还是其他所有问题？ 更新: 需要说明的是，溢出的不是单元格本身，而是我放入其中的一个 div。代码如下所示:

<table>
    <tr>
        <td class="header">
            <div class="header">Header</div>
        </td>
    </tr>
    <tr>
        <td>
            <div class="scroll">
                ... VERY BIG CONTENT HERE ... 
            </div>
        </td>
    </tr>
    <tr>
      <td class="footer">
        <div class="footer">Footer</div>
      </td>
    </tr>
</table>

一目了然over at jfiddle .

我想要实现的是一种布局，通过这种布局，页眉和页脚之间的可用空间被完全填满并且如果空间用完了，那么它得到一个滚动条，而不是整个窗口。我已经明白，即使是在 Stack Overflow 上一探究竟，仅使用 CSS，仅使用 DIV，这是无法实现的(使用绝对定位不是一种选择，因为元素是从正常流中取出的，并且“极端”窗口大小调整将导致元素重叠)。

更新: flexbox model似乎正是这些情况下所需要的。但是，我想我们仍然不能指望它得到广泛实现。

Answer 1

这就是您要实现的目标吗 http://www.cssplay.co.uk/layouts/basics2.html ？