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

【问题标题】：Child inside parent with min-height: 100% not inheriting height最小高度的父母内部的孩子：100％不继承高度
【发布时间】：2011-12-11 22:36:07
【问题描述】：

我找到了一种方法，可以通过设置min-height: 100%; 使 div 容器至少占据页面的整个高度。但是，当我添加嵌套 div 并设置 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>

【问题讨论】：

现代解决方案：给容器display:flex和flex-direction:column，给孩子flex:1。
@jackocnr 由于bug，它在任何 IE 中都不起作用，它已在 Edge 中修复。
@jackocnr 在 2021 年无法在 chrome 或 firefox 中使用，但在某些在线代码编辑器中可以使用

标签： css html

【解决方案1】：

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

【讨论】：

这样做并不能解决问题，实际上您正在覆盖 min-height:100% 设置，该设置无法实现 height:100% 无法实现的目标，这不是OP想要
@styler 添加height: 1px; 不会覆盖最小高度。恰恰相反。这是这里最好的解决方案...演示：jsbin.com/mosaboyo/1/edit
看看这个height: 1px;为什么工作stackoverflow.com/questions/2341821/height100-vs-min-height100
@jjenzz 我认为 styler 试图解决的问题是，它没有保留 min-height 的扩展特性。例如，如果有足够的文本，它将溢出。见jsbin.com/vuyapitizo/1
在下面引用 Paul 的评论：“但它不允许容器增长，这违背了使用 min-height 的目的。” stackoverflow.com/questions/8468066/…

【解决方案2】：

这是一个报告的 webkit (chrome/safari) 错误，具有 min-height 的父母的孩子不能继承 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% 的方式完全相同。而且 - 更重要的是 - 如果我将子元素设置为 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/。

【讨论】：

虽然这是一个很好的解决方案，但我最喜欢@Kushagra Gour 的解决方案，因为这不会影响布局（我不想使用表格显示...）
从规范中得出的结论是 min-/max-height 不明确……奇怪我的意思是错误的。阅读整个段落，在上下文中，这种解释是不正确的。为了澄清为什么，上下文中的“包含块的高度”在语义上与高度属性不同。相反，如果措辞是“包含块的高度属性”，那么您的解释将是有意义的（并且是规范中的错误）。
位置：绝对；最小高度：继承；最小宽度：继承；这对我有用
注意，正如编辑（和 bugs.webkit 链接）所提到的，这并不是一个真正的错误——如果父母是min-height: 20px，而孩子是height: 120%，那会影响父母的身高，这会影响孩子的身高……当父母的身高不知道时，孩子不能用它来做尺码。
在 2021 年仍然有这个 bug codepen.io/dshung1997/pen/LYxvXNy

【解决方案3】：

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

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

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

【讨论】：

部分有效，但子级仅继承min-height。父母身高越大，孩子就不会膨胀了。
它适用于父元素不调整大小的情况。
只有当最小高度是绝对的，而不是百分比，AFAICS。

【解决方案4】：

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

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

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

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

【讨论】：

【解决方案5】：

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

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

【讨论】：

但是它不允许容器增长，这违背了使用min-height的目的。
我还需要一个包装器来填充父级的最小高度和高度。对我有用的是将 min-height 设置为继承，将 height 设置为 100%。

【解决方案6】：

虽然这里建议使用display: flex;，但考虑使用display: grid;，因为它是widely supported。默认情况下，网格的唯一子节点将完全填充其父节点。

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;
}

【讨论】：

【解决方案7】：

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

body {
  margin: 0;
}

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

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

【讨论】：

【解决方案8】：

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

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

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

因此，由于min-height 父级没有明确的height 属性集，它默认为自动。

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

【讨论】：

【解决方案9】：

这通常对我有用：

.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>

【讨论】：

【解决方案10】：

对于谷歌员工：

这个 jquery-workaround 让#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>

【讨论】：

很好的解决方法，您可以设置元素的最小高度，而不将高度设置为“自动”。它对我有用。

【解决方案11】：

另一种 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';
}

使用 jQuery：

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

角度指令：

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>

【讨论】：

感谢指令解决方案。这就是我最终使用的，但我不希望窗口高度成为最小值；相反，我想继承父级的最小高度，所以我将代码更改为： var height = elm.parent()[0].offsetHeight;

【解决方案12】：

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

使用 min-height 时，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>

【讨论】：

【解决方案13】：

将此添加到父组件为我修复了它：

display: flex;
flex-direction: column;

【讨论】：

【解决方案14】：

为了保持这个主题完整，我找到了一个未探索的解决方案Here 使用固定位置。

无溢出

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>

【讨论】：

【解决方案15】：

在为我们的尝试之后！ chrome 明白，当我将显示值设置为内联块时，我希望子元素的高度为 100%。顺便说一句，设置浮动会导致它。

display:inline-block

更新

这不起作用。解决方案是获取父节点 offsetheight 并使用 javascript 在页面和页面中使用它。

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

【讨论】：

【解决方案16】：

对于基于百分比的身高和父母仍在根据儿童身高增长的情况，这对我有用。在 Firefox、Chrome 和 Safari 中运行良好。

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

.child {
  min-height: 100vh;
}

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

【讨论】：