我想我会分享这个，因为我在任何地方都没有看到这个，这是我用来修复我的解决方案。

解决方案:min-height:继承;

我有一个父结点有一个指定的最小高度，我需要一个子结点也有这个高度。

.parent { 最小高度:300 px; background - color: rgba(255255年,0,0.5);/ /黄色 ｝ .child { 最小高度:继承; background - color: rgba(0255年,0,0.5);/ /蓝色 ｝ p { 填充:20 px; 颜色:红色; 字体类型:无衬线; 粗细:大胆的; text-align:中心; ｝ < div class = "父" > < div class = "孩子" > <p>黄色+蓝色=绿色:)</p> < / div > < / div >

这样，子节点现在就相当于最小高度的100%。

我希望有些人会觉得这有用:)

这对我来说通常是有效的:

.parent { 最小高度:100 px; 背景颜色:绿色; 显示:flex; ｝ .child { 高度:继承; 宽度:100%; 背景颜色:红色; ｝ <！DOCTYPE html > < html > 身体< > < div class = "父" > < div class = "孩子" > < / div > < / div > 身体< / > < / html >

为父容器添加高度:1px。工作在Chrome, FF, Safari。

这是一个报告的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/。

因为谷歌员工:

这个jquery解决方案使#containment自动获取高度(by, height: auto)，然后获取实际高度作为像素值分配。

<script type="text/javascript">
<!--
    $(function () {

        // workaround for webkit-bug http://stackoverflow.com/a/8468131/348841

        var rz = function () {
            $('#containment')
            .css('height', 'auto')
            .css('height', $('#containment').height() + 'px');
        };

        $(window).resize(function () {
            rz();
        });

        rz();

    })
-->
</script>

Kushagra Gour的解决方案确实有效(至少在Chrome和IE中)，并且无需使用display: table就解决了原来的问题;并显示:table-cell;。参见plunker: http://plnkr.co/edit/ULEgY1FDCsk8yiRTfOWU

设置min-height: 100%;身高:1 px;在外部div上，使其实际高度至少为100%。它还允许内部div正确继承高度。