为什么在Firefox和Chrome中使用display: table的表现不同？

Question

我正在制作一个类似于这样的布局。

All contained withing a 'table' (display: table)
 __________________
| S| HEADER        |
| I|---------------|
| D|               |
| E| CONTENT       |
|  |_______________|
|  |FOOTER         |
--------------------

SIDE 是一个 table-cell，HEADER, CONTENT, FOOTER 嵌套在另一个 table-cell 中。 CONTENT 是一个 div，其中的 overflow-y 设置为自动，在Chrome浏览器中，当CONTENT中的内容超过初始高度时，滚动条出现，整个表格不会垂直调整大小，但是在Firefox中，整个表格会被垂直扩展，这不是我预期的行为。

我的表格具有 table-layout: fixed 属性和 overflow: hidden。 有什么办法可以防止在 Firefox 中表格垂直扩展呢？

- Miller

---

你可能不应该使用表格来实现这个。应该使用flexbox，grid或float。 - bjb568

欢迎来到Stack Overflow，感谢你提出这个有趣的问题。如果你在帖子中包含一些示例代码来重现你描述的行为，那么人们很容易地观察到你所说的，并找到一个答案，从而增加你得到答案的几率。祝好运！:) - Jeremy

你成功克服了这个问题吗？ - David Salamon

Answer 1

提到某个高度

<td>
<div style="height:200px;
overflow:hidden;">
contents goes here
</div>
</td> 

调整高度，应该将超出视线的额外行裁剪掉

- AvikB