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

小编典典

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

all

我找到了一种让 div 容器至少占据页面全高的方法，方法是设置min-height: 100%;. 但是，当我添加嵌套的 div 和
setheight: 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>

阅读 61

2022-05-31

共1个答案

小编典典

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

如果我在容器上放了一个最小高度，我没有明确指定它的高度——所以我的元素应该有一个auto高度。这正是 Webkit 和所有其他浏览器所做的。

其次，我发现的解决方法：

如果我将容器元素设置为display:tablewith它，其行为方式与我将其设置为 100%height:inherit的方式完全相同。min- height而且 - 更重要的是 - 如果我将子元素设置为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/。

2022-05-31