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。

以下是这个确切设置的小提琴：http://jsfiddle.net/21ytsquo/

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

这只能通过这种精确设置重现。如果我只使用另一个div而不是table-cell，它就可以了。如果我删除了content-wrapper元素，它就可以了。如果我省略overflow:hidden，它就可以了。到目前为止它只在firefox中出现。在Chrome中它似乎工作正常。

为什么会发生这种情况？

Answer 1

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

没有太多关注它，但现在应该很长时间。

CSS：firefox + table + height 100％+ overflow hidden = madness

1 个答案: