2022年7月6日

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

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

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

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

display: flex;
flex-direction: column;

另一个简单的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>

我不相信这是浏览器的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%的高度而无需指定。

目前实现这一目标的最佳方法是使用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>