这对我来说是适用的，基于百分比的身高和父母仍然根据孩子的身高增长。 在Firefox, Chrome和Safari中工作良好。

.parent { 位置:相对; 最小高度:100%; ｝ .child { 最小高度:100 vh; ｝ < div class = "父" > < div class = "孩子" > < / div > < / div >

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

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

可能的解决方法:

添加位置:相对于#containment 添加位置:绝对到# include -shadow-left

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

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

编辑于2014年4月10日

因为我目前正在做一个项目，我确实需要具有最小高度的父容器，并且子元素继承容器的高度，所以我做了更多的研究。

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

百分比是根据高度计算的 生成框的包含块。如果包含高度 Block没有显式地指定(也就是说，它取决于内容 高度)，并且该元素不是绝对定位的，值 计算为“auto”。

如果我把一个min-height放在我的容器上，我没有显式地指定它的高度——所以我的元素应该得到一个自动高度。这正是Webkit和所有其他浏览器所做的。

第二，我发现的变通方法:

如果我将容器元素设置为display:table with 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/。

虽然显示:伸缩;这里已经建议，考虑使用显示:网格;现在它得到了广泛支持。默认情况下，网格的唯一子节点将完全填充其父节点。

Html, body { 高度:100%; 保证金:0; 填充:0;/*不要忘记Safari */ ｝ #控制{ 显示:网格; 最小高度:100%; 背景:粉色; ｝ # containment-shadow-left { 背景:水; ｝

除了现有的答案，还有视口单元vh可以使用。下面是一个简单的代码片段。当然，它也可以与calc()一起使用，例如min-height: calc(100vh - 200px);当页眉和页脚的高度在一起是200px时。

身体{ 保证金:0; ｝ .child { 最小高度:100 vh; 背景:粉色; ｝ < div class = "父" > < div class = "孩子" > < / div > < / div >

只是为了保持这个主题的完整，我发现了一个解决方案没有探索这里使用固定位置。

没有溢出

Html, body， .wrapper， .parent， .child { 位置:固定; 上图:0; 底部:0; 左:0; 右:0; 保证金:0; 填充:0; 高度:100%; ｝ .child { 溢出:汽车; 背景:灰色; } .height-50 { 高度:50%; 宽度:5 em; Margin: 10px auto; 背景:青色; ｝ < div class = "包装" > < div class = "父" > < div class = "孩子" > < div class = " height-50 " > < / div > < / div > < / div > < / div >

与溢出

Html, body， .wrapper， .parent， .child { 位置:固定; 上图:0; 底部:0; 左:0; 右:0; 保证金:0; 填充:0; 高度:100%; ｝ .child { 溢出:汽车; 背景:灰色; ｝ .height - 150 { 高度:150%; 宽度:5 em; Margin: 10px auto; 背景:青色; ｝ < div class = "包装" > < div class = "父" > < div class = "孩子" > < div class = "身高- 150 " > < / div > < / div > < / div > < / div >

添加这个到父组件为我修复了它:

display: flex;
flex-direction: column;