最小身高的父母内部的孩子：100％不继承身高

Question

我通过设置找到了一种使div容器至少占据整个页面高度的方法min-height:100%;。但是，当我添加一个嵌套div和set时height:100%;，它不会扩展到容器的高度。有办法解决吗？

html, body {

  height: 100%;

  margin: 0;

}



#containment {

  min-height: 100%;

  background: pink;

}



#containment-shadow-left {

  height: 100%;

  background: aqua;

}


<div id="containment">

  <div id="containment-shadow-left">

    Hello World!

  </div>

</div>

Answer 1

这是一个已报告的Webkit（chrome /safari）错误，具有最小身高的父母的孩子不能继承height属性：
:

显然Firefox也受到了影响（目前无法在IE中进行测试）

可能的解决方法：

• 添加位置：相对于#containment
• 将位置：绝对添加到＃containment-shadow-left

当内部元素具有绝对定位时，该错误不会显示。

编辑于2014年4月10日

由于我目前正在从事的项目中 确实 需要带有的父容器min-height，而子元素继承了容器的高度，因此我进行了更多研究。

第一： 我现在不确定当前浏览器的行为是否确实是一个错误。CSS2.1规范说：

相对于生成的盒子的包含块的高度计算百分比。如果未明确指定包含块的高度（即，它取决于内容的高度），并且该元素的位置不是绝对的，则该值将计算为“自动”。

如果我将最小高度放在容器上，则不会 明确 指定其高度-因此我的元素应该具有auto高度。而这正是Webkit和其他所有浏览器的作用。

其次，我找到了解决方法：

如果将我的容器元素设置为display:table，height:inherit则其行为与我将其设置min-height为100％时完全相同。而且-更重要的是-如果我将child元素设置为display:table-cell它，它将完美继承容器元素的高度-无论它是100％还是更高。

完整的CSS：

html, body {
  height: 100%;
  margin: 0;
}

#container {
  background: green;
  display: table;
  height: inherit;
  width: 100%;
}

#content {
  background: red;
  display: table-cell;
}

标记：

<div id="container">
  <div id="content">
      <p>content</p>
  </div>
</div>