在父容器中添加height: 1px。在Chrome、FF和Safari中有效。

这是一个已报告的webkit（chrome/safari）bug，具有最小高度的父元素的子元素无法继承height属性：https://bugs.webkit.org/show_bug.cgi?id=26559

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

可能的解决方法：

• 在#containment中添加position:relative
• 在#containment-shadow-left中添加position:absolute

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

请参见http://jsfiddle.net/xrebB/

2014年4月10日编辑

由于我目前正在进行一个非常需要具有min-height的父容器和子元素继承容器高度的项目，所以我进行了更多的研究。

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

如果我在容器上设置了min-height，我并没有明确指定其高度 - 所以我的元素应该获得一个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/。