logo标签列表

CSS: 火狐浏览器 + 表格 + 高度100% + 溢出隐藏 = 疯狂

css
3

I have the following 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，而外部的div应用了overflow:hidden属性。
这里有一个与此完全相同的设置：http://jsfiddle.net/21ytsquo/ 当你尝试调整窗口大小时，会发现它看起来还不错。如果你减少高度，内部元素不会随之缩小，它们只是保持原来的大小，外部窗口则会出现滚动条。当你增加高度时，新的更大高度现在成为内部内容的固定高度。（我希望这样很容易理解，但如果你玩一下这个fiddle，就能立刻看到问题所在）
这只是使用这个确切设置才会发生的情况。如果我只是用另一个div代替表格单元格，它就可以工作。如果我删除content-wrapper元素，它也可以工作。如果我省略了overflow:hidden，它也可以工作。到目前为止，它只在Firefox中发生过。在Chrome中，它似乎正常工作。
那么为什么会这样呢？
2
Chrome运行良好...也许Firefox低于27版本，我知道它在table-cell和某些属性方面存在问题？ - DaniP
@Juhana 是的，没错。我忘了提到这一点。目前只在 Firefox 中发生了这种情况。我已经更新了我的问题。 - basilikum
@Danko，我的Firefox版本是35。我在Linux上运行它。 - basilikum
我可以在Firefox Developer 37中重新现这个问题。 - Rence
1个回答
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接