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中,它似乎正常工作。那么为什么会这样呢?