CSS：firefox +表格+高度100％+溢出隐藏=疯狂

我有以下的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而不是表格单元格，它就可以工作。 如果我删除了content-wrapper元素，它会起作用。 如果我省略了overflow:hidden ，它可以工作。 到目前为止，只在Firefox中发生。 在Chrome中，它似乎工作正常。

那么为什么会这样呢？

---

我认为这是因为这个bug：https：//bugzilla.mozilla.org/show_bug.cgi？id = 63895

没有希望闯入它，但它现在应该很长时间。

链接地址: http://www.djcxy.com/p/39561.html

上一篇: CSS: firefox + table + height 100% + overflow hidden = madness

下一篇: CSS transition doesn't work in Firefox when position is changed