CSS:firefox + 表格 + 高度 100% + 溢出隐藏 = 疯狂

Question

我有以下 html:

<table>
    <tr>
        <td>
            <div class="main-area">
                <div class="content-wrapper">
                </div>
            </div>
        </td>
    </tr>
</table>

我的样式如下:

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

table {
    width: 100%;
    height: 100%;
}

td {
    height: 100%;
}


.main-area {
    background-color: red;
    height: 100%;
    overflow: hidden;
}

.content-wrapper {
    height: 100%;
}

基本上，我希望所有内容的高度都为 100%。有一张只有一个单元格的表格，里面有两个嵌套的 div，而外面的表格应用了 overflow:hidden。

这是一个具有这种精确设置的 fiddle :http://jsfiddle.net/21ytsquo/

正如您所意识到的，一开始看起来还不错，您会看到窗口充满了红色的“主区域”。当您尝试调整窗口大小时会发生奇怪的事情。如果降低高度，内部元素不会随之降低，它们只是保持相同的大小，并且外部窗口会溢出滚动条。当您增加高度时，新的较大高度现在成为内部内容的固定高度。 (我希望它是可以理解的，但是如果你玩弄 fiddle ，你会立即看到问题)

这只能用这个确切的设置重现。如果我只使用另一个 div 而不是表格单元格，它就可以工作。如果我删除 content-wrapper 元素，它就可以工作。如果我省略 overflow:hidden，它会起作用。到目前为止，它只发生在我的 firefox 中。在 Chrome 中它似乎工作正常。

那么为什么会这样呢？

Answer 1

我相信这是因为这个错误:https://bugzilla.mozilla.org/show_bug.cgi?id=63895

还没有考虑进去，但现在应该早就修复了。