HTML div元素无法继承其父元素的高度，即使父元素具有非零高度

Question

HTML div元素无法继承其父元素的高度，即使父元素具有非零高度

8

我有一个相当简单的问题。我有一个容器 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％的具体内容。但看起来这里并不是这样发生的。

- dima1109

给child2添加min-height属性，然后将其设置 - Just code

1

为了让高度：100%生效，“容器”需要设置明确的高度。但这并不是这种情况。它的高度是由其内容——即表格隐含地给出的。 - Eric MORAND

这可能会有所帮助：http://stackoverflow.com/questions/18362026/equalize-the-height-of-left-and-right-div-prevent-right-div-from-going-below-le/18362090#18362090 - Hashem Qolami

2个回答

1

或者你可以使用：aspect-ratio 这个能省下我很多麻烦 :)

- SpongeB0B

第一个回答很不错。加上一个例子会更好！ - undefined

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- kapa · Accepted Answer

height: 100% 是一个常见的误解。

来自 MDN：

百分比是相对于生成框所在块容器的高度计算的。如果未明确指定包含块的高度（即它取决于内容的高度），并且此元素没有绝对定位，则该值计算为 auto。根元素上的百分比高度相对于初始包含块。

你的问题的一种解决方案可能是使用绝对定位。在容器上设置 position: relative，并将子元素绝对定位。在它们上面设置 top: 0; bottom: 0; 将会使它们拉伸到容器的高度。

快速演示（展示了这个概念，您可能需要微调）