具有最小高度的父级内的子级: 100%不继承高度

Question

我找到了一种方法，通过设置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>

​

Answer 1

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

显然Firefox也受到了影响(目前不能在IE中测试)

可能的解决方法：

相对于#containment

• add位置添加位置:相对于#containment-shadow-left

的绝对位置：

当内部元素有绝对位置时，bug不会显示出来。

请参阅http://jsfiddle.net/xrebB/

2014年4月10日的编辑

由于我目前正在做的一个项目中，我确实需要带有min-height的父容器，以及继承容器高度的子元素，因此我做了更多的研究。

First:我不再确定当前的浏览器行为是否真的是一个bug。CSS2.1规范说：

百分比是相对于生成的长方体的包含块的高度计算的。如果包含块的高度未显式指定(即，它取决于内容高度)，并且此元素没有绝对定位，则该值计算为“auto”。

如果我在容器上放置一个最小高度，我没有显式地指定它的高度-所以我的元素应该得到一个auto高度。而这正是Webkit和所有其他浏览器所做的事情。

第二，我发现的解决方法：

如果我用height:inherit将容器元素设置为display:table，那么它的行为就像我给它的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/。

Answer 2

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

Answer 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%。

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