最小身高的父母内部的孩子：100％不继承身高

通过设置，我找到了一种使div容器至少占据整个页面高度的方法min-height: 100%;。但是，当我添加一个嵌套div和set时height: 100%;，它不会扩展到容器的高度。有办法解决吗？

html, body {
  height: 100%;
  margin: 0;
}

#containment {
  min-height: 100%;
  background: pink;
}

#containment-shadow-left {
  height: 100%;
  background: aqua;
}

<div id="containment">
  <div id="containment-shadow-left">
    Hello World!
  </div>
</div>

这是一个已报告的Webkit（chrome / safari）错误，具有最小身高的父母的孩子不能继承height属性：https : //bugs.webkit.org/show_bug.cgi?id=26559

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

可能的解决方法：

• 添加位置：相对于#containment
• 将位置：绝对添加到＃containment-shadow-left

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

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

编辑于2014年4月10日

由于我目前正在从事一个项目，因此我确实需要带有min-height，而子元素继承了容器的高度，因此我进行了更多研究。

第一：我不确定当前浏览器的行为是否确实是一个错误。CSS2.1规范说：

相对于生成的框的包含块的高度计算百分比。如果未明确指定包含块的高度（即，它取决于内容的高度），并且该元素的位置不是绝对的，则该值将计算为“自动”。

如果将最小高度放在容器上，则不会明确指定其高度-因此，我的元素应该获得一个auto高度。而这正是Webkit和所有其他浏览器的作用。

其次，我找到了解决方法：

如果将我的容器元素设置为display:table，height:inherit则其行为与我将其设置min-height为100％时完全相同。而且-更重要的是-如果将child元素设置为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/。

添加height: 1px到父容器。适用于Chrome，FF，Safari。

以为我会分享这一点，因为我在任何地方都看不到，这就是我用来解决问题的方法。

解决方案：min-height: inherit;

我的父母有一个指定的最低身高，我需要一个孩子也要达到这个身高。

.parent {
  min-height: 300px;
  background-color: rgba(255,255,0,0.5); //yellow
}

.child {
  min-height: inherit;
  background-color: rgba(0,255,0,0.5); //blue
}

p {
  padding: 20px;
  color: red;
  font-family: sans-serif;
  font-weight: bold;
  text-align: center;
}

<div class="parent">
  <div class="child">
    <p>Yellow + Blue = Green :)</p>
  </div>
</div>

这样，孩子现在可以充当最小高度的100％的高度。

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

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

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

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

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

Kushagra Gour的解决方案确实有效（至少在Chrome和IE中有效），无需使用display: table;和就可以解决原始问题display: table-cell;。参见plunker：http：//plnkr.co/edit/ULEgY1FDCsk8yiRTfOWU

min-height: 100%; height: 1px;根据需要，在外部div上设置会导致其实际高度至少为100％。它还允许内部div正确继承高度。

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

body {
  margin: 0;
}

.child {
  min-height: 100vh;
  background: pink;
}

<div class="parent">
  <div class="child"></div>
</div>

我不认为这是浏览器的错误。所有人的行为方式都一样-也就是说，一旦停止指定明确的高度，最小高度基本上就是“最后一步”。

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

相对于生成的框的包含块的高度计算百分比。如果未明确指定包含块的高度（即，它取决于内容的高度），并且该元素的位置不是绝对的，则该值将计算为“自动”。

因此，由于min-height父级未height设置显式属性，因此默认情况下为auto。

display: table-cell如果您的目标受众的浏览器有可能，可以通过使用或更新的样式（例如flexbox）来解决此问题。在某些情况下，您也可以通过在绝对定位的内部元素上使用top和bottom属性来颠覆此条件，该属性可为您提供100％的高度，而无需指定。

尽管display: flex;此处已提出建议display: grid;，但现在考虑使用它已得到广泛支持。默认情况下，网格的唯一子级将完全填充其父级。

html, body {
  height: 100%;
  margin: 0;
  padding: 0; /* Don't forget Safari */
}

#containment {
  display: grid;
  min-height: 100%;
  background: pink;
}

#containment-shadow-left {
  background: aqua;
}

对于Google员工：

这种jquery解决方法使#containment自动获取高度（通过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>

如今，实现此目标的最佳方法是使用display: flex;。但是，尝试支持IE11时可能会遇到问题。根据https://caniuse.com使用flexbox：

使用最小高度时，IE 11无法正确垂直对齐项目

Internet Explorer兼容解决方案

解决方案是display: table;在父母和display: table-row;孩子身上都使用height: 100%;替代min-height: 100%;。

大多数解决方案的上市在这里使用display: table，table-row和/或table-cell，但他们不复制相同的行为min-height: 100%;，这就是：

• 继承父级的计算高度（而不是继承父级的高度） height属性）；
• 允许父母的身高超过其身高min-height；

使用此解决方案时，行为相同且属性 min-height不需要该，从而可以解决该错误。

说明

之所以起作用，是因为与大多数元素不同，使用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>

另一个JS解决方案很简单，可以用来避免仅CSS不容易或额外的标记/ hacky解决方案。

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>

这通常对我有用：

.parent {
  min-height: 100px;
  background-color: green;
  display: flex;
}
.child {
  height: inherit;
  width: 100%;
  background-color: red;
}

<!DOCTYPE html>
<html>
  <body>
    <div class="parent">
      <div class="child">
      </div>
    </div>
  </body>
</html>

 Run code snippetHide results
Expand snippet

为了使本主题保持完整，我发现此处没有使用“固定位置” 探讨的解决方案。

无溢出

html, body, .wrapper, .parent, .child {
  position: fixed;
  top: 0; 
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0;
  height: 100%;
}

.child {
  overflow: auto;
  background: gray;
}

.height-50 {
  height: 50%;
  width: 5em;
  margin: 10px auto;
  background: cyan;
}

<div class="wrapper">
  <div class="parent">
    <div class="child">
      
      <div class="height-50"></div>
      
    </div>
  </div>
</div>

有溢出

html, body, .wrapper, .parent, .child {
  position: fixed;
  top: 0; 
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0;
  height: 100%;
}

.child {
  overflow: auto;
  background: gray;
}

.height-150 {
  height: 150%;
  width: 5em;
  margin: 10px auto;
  background: cyan;
}

<div class="wrapper">
  <div class="parent">
    <div class="child">
      
      <div class="height-150"></div>
      
    </div>
  </div>
</div>

这是我的工作方式，基于百分比的身高以及父母仍根据孩子的身高成长。在Firefox，Chrome和Safari中运行良好。

.parent {
  position: relative;
  min-height: 100%;
}

.child {
  min-height: 100vh;
}

<div class="parent">
    <div class="child"></div>
  </div>

为我们而努力！当我将显示值设置为内联块时，chrome了解到我希望子元素的高度为100％。btw设置float将导致它。

display:inline-block

更新

这是行不通的。解决方案是获取父节点的offsetheight，并在javascript页面的和处使用它。

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