我有一个相当简单的问题。我有一个容器 div,其中包含三个子元素 - 两个 div 和一个表格。以下是 CSS 代码:
#container {
overflow: auto;
}
#child1 {
float: left;
width: 50px;
height: 100%;
}
#table1 {
float: left;
}
#child2 {
float: left;
width: 50px;
height: 100%;
}
HTML也非常简单
<div id='container'>
<div id='child1'></div>
<table id='table1'>
<tbody></tbody>
</table>
<div id='child2'></div>
</div>
表格中有一些设置高度的内容。页面渲染时,父容器div的高度设置为表格的高度,这是应该的。然而,其他子元素由于某种原因被折叠了。以下是一个示例,包含一些表格元素和样式以便更清晰地理解:http://jsfiddle.net/GUEc6/。如您所见,容器div的高度被正确地设置为表格的高度,但child1和child2 div未能将其高度正确设置为100%。我知道如果浮动元素的高度设置为100%,则父元素需要具有自己的高度定义,以便子元素可以是100%的具体内容。但看起来这里并不是这样发生的。