Question

我有一个相当简单的问题。我有一个有三个孩子的容器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 divs无法正确设置其高度为100％。我知道如果浮动元素的高度设置为100％，则父元素需要对其自身高度进行一些定义，以便子项可以是具体的100％。但它看起来并不像这里发生的那样。

Answer 1

这是对height: 100%的常见误解。

来自MDN：

百分比是根据高度来计算的生成的框包含块。如果含有的高度块未明确指定（即，它取决于内容高度），这个元素并不是绝对定位的值计算自动。根元素的百分比高度是相对的到最初的包含块。

您的问题的一个解决方案可能是绝对定位。在容器上设置position: relative并绝对定位孩子。在它们上设置top: 0; bottom: 0;会将它们拉伸到容器的高度。

Quick Demo（显示概念，您可能需要调整它）

即使父级具有非零高度，HTML div元素也不会占用其父级的高度

1 个答案: