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

Question

通过设置 min-height: 100%; ，我找到了一种使 div 容器至少占据页面全高的方法。但是，当我添加嵌套 div 并设置 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>

原文由 lamefun 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这是一个报告的 webkit (chrome/safari) 错误，具有 min-height 的父母的孩子不能继承 height 属性： https ://bugs.webkit.org/show_bug.cgi?id=26559

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

可能的解决方法：

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

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

见 http://jsfiddle.net/xrebB/

2014 年 4 月 10 日编辑

由于我目前正在开发一个项目，我 确实 需要带有 min-height 的父容器，以及继承容器高度的子元素，因此我做了更多的研究。

首先： 我不太确定当前的浏览器行为是否真的是一个错误。 CSS2.1 规范说：

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

如果我在我的容器上放置一个最小高度，我没有 明确 指定它的高度 - 所以我的元素应该得到一个 auto 高度。这正是 Webkit 和所有其他浏览器所做的。

其次，我发现的解决方法：

如果我将容器元素设置为 display:table 和 height:inherit 它的作用与我给它的 min-height 的 100% 完全相同。而且 - 更重要的是 - 如果我将子元素设置为 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>

请参阅 http://jsfiddle.net/xrebB/54/ 。

原文由 ptriek 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

添加 height: 1px 到父容器。适用于 Chrome、FF、Safari。

原文由 Kushagra Gour 发布，翻译遵循 CC BY-SA 3.0 许可协议