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

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

在尝试了我们的之后!chrome理解，当我设置显示值为inline block时，我希望子元素的高度为100%。顺便说一句，设置浮动会导致它。

display:inline-block

更新

这行不通。解决方案是获得parentnode offsetheight，并使用它在页面的和javascript。

<script>
    SomedivElement = document.getElementById('mydiv');
    SomedivElement.style.height = String(nvleft.parentNode.offsetHeight) + 'px';    
</script>

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

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

我不相信这是浏览器的bug。所有的行为都是一样的——也就是说，一旦停止指定显式高度，min-height基本上就是“最后一步”了。

这似乎正是CSS 2.1规范所建议的: http://www.w3.org/TR/CSS2/visudet.html#the-height-property

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

因此，由于min-height父类没有显式的height属性设置，它默认为auto。

有一些方法可以通过使用display: table-cell或新的样式(如flexbox)来解决这个问题，如果这对您的目标用户的浏览器可行的话。在某些情况下，您还可以通过在绝对定位的内部元素上使用top和bottom属性来改变这种情况，这将为您提供100%的高度而无需指定。

另一个简单的JS解决方案，可以用来避免不简单的css或额外的标记/ hack解决方案。

function minHeight(elm, percent) {
  var windowHeight = isNaN(window.innerHeight) ? 
                     window.clientHeight : window.innerHeight;
  var height = windowHeight * percent / 100;
  elm.style.minHeight = height + 'px';
}

W/ jQuery:

function minHeight($elm, percent) {
  var windowHeight = $(window).height();
  var height = windowHeight * percent / 100;
  $elm.css('min-height', height + 'px');
}

Angular指令:

myModule.directive('minHeight', ['$window', function($window) {
  return {
    restrict: 'A',
    link: function(scope, elm, attrs) {
      var windowHeight = isNaN($window.innerHeight) ? 
               $window.clientHeight : $window.innerHeight;
      var height = windowHeight * attrs.minHeight / 100;
      elm.css('min-height', height + 'px');
    }
  };
}]);

这样用:

<div>
  <!-- height auto here -->
  <div min-height="100">
    <!-- This guy is at least 100% of window height but grows if needed -->
  </div>
</div>

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

解决方案: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%。

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

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

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

这是在@jackocnr的评论中添加的，但我错过了。对于现代浏览器，我认为这是最好的方法。

如果容器太小，它会让内部元素填充整个容器，但如果容器太大，它会扩展容器的高度。

#containment {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

#containment-shadow-left {
  flex: 1;
}

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

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

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

没有溢出

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 >

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

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

目前实现这一目标的最佳方法是使用display: flex;。然而，当你试图支持IE11时，你可能会遇到一个问题。根据https://caniuse.com使用flexbox:

当使用min-height时，IE 11不能正确地垂直对齐项目

Internet Explorer兼容解决方案

解决方案是使用display: table;在父元素和显示元素上:table-row;对孩子双方身高:100%;作为min-height的替换:100%;

这里列出的大多数解决方案使用display: table, table-row和/或table-cell，但它们不会复制与min-height: 100%;相同的行为，即:

继承父类的计算高度(而不是继承它的height属性); 允许父节点的高度超过其min-height;

当使用这个解决方案时，行为是相同的，属性min-height是不需要的，这允许绕过bug。

解释

它工作的原因是，与大多数元素不同，使用display: table和table-row的元素将始终与它们的内容一样高。这使得它们的height属性的行为类似于min-height。

实际解决方案

html, body { height: 100px; margin: 0; } #containment { display: table; height: 100%; background: pink; width: 100%; } #containment-shadow-left { display: table-row; height: 100%; background: aqua; } #content { padding: 15px; } #demo { display: none; background-color: red; height: 200px; } #demo-checkbox:checked ~ #demo { display: block; } <div id="containment"> <div id="containment-shadow-left"> <div id="content"> <input id="demo-checkbox" type="checkbox"> <label for="demo-checkbox">Click here for overflow demo</label> <div id="demo">This is taller than #containment</div> </div> </div> </div>

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

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

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

display: flex;
flex-direction: column;

2022年7月6日

.parent { 显示:flex;/*非常重要的规则*/ flex-direction:列;/*非常重要的规则*/ 最小高度:100% ｝ .child { 高度:100%; flex-grow: 1;/*非常重要的规则，模拟flex: 1;* / ｝ < div class = "父" > < div class = "孩子" > < / div > < / div >

已经有一段时间了，但是，如果其他人还在挣扎，我找到了我的变通办法。 我需要的父母有一个最小的高度，和孩子(这将包含几个图像/文件预览)必须占据整个父母，所以..

我简单地定义了一个最小的高度给孩子，让父母没有定义高度，所以它可以随着孩子的内容增长。

CSS

.parent{
    border: 1px solid black;
    border-radius: 5px;
}
.children{
  width: 100%;
  min-height: 100px;
}

HTML:

<div class="parent">
    <div class="children">
        some content inside
    </div>
</div>