父母与最小高度内的孩子：100％不继承高度 [英] Child inside parent with min-height: 100% not inheriting height

问题描述

通过设置 min-height：100％; ，我发现了一种让div容器至少占据整个页面高度的方法。但是，当我添加一个嵌套的div并设置 height：100％; 时，它不会伸展到容器的高度。有没有办法解决它？

{height：100 ％; margin：0;}＃containment {min-height：100％; background：pink;}＃containment-shadow-left {height：100％;背景：aqua;}

< div id =containment > < div id =containment-shadow-left>你好，世界！ < / div>< / div>

解决方案

这是一个已报告的webkit（chrome / safari）错误，具有min-height的父母的孩子无法继承height属性： https://bugs.webkit.org/show_bug.cgi?id=26559

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

可能的解决方法：

• 添加位置：相对于#containment
  
• 添加位置：绝对至#contentment-shadow-left

<

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

2014年4月10日修改

由于我目前正在为一个项目工作，因为我真的需要使用 min-height 的父容器，并且子元素一世为了降低容器的高度，我进行了一些更深入的研究。

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

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

如果我在容器上放置最小高度，我不明确指定它的高度，我的元素应该得到 auto 高度。这正是Webkit和所有其他浏览器所做的。

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

如果使用 height：inherit 将我的容器元素设置为 display：table 就像我给它一个100％的 min-height 一样。而且 - 更重要的是，如果我将子元素设置为 display：table-cell ，它将完全继承容器元素的高度 - 不管是100％还是更多。 p>

完整的CSS：

  html，body {
 height： 100％; 
保证金：0; 
} 
 
 #container {
 background：green; 
 display：table; 
 height：inherit; 
宽度：100％; 
} 
 
 #content {
 background：red; 
 display：table-cell; 
} 
  

标记：

 < div id =container> 
< div id =content> 
< p>内容< / p> 
< / div> 
< / div> 
  

请参阅 http ：//jsfiddle.net/xrebB/54/ 。

I found a way to make a div container to occupy at least full height of a page, by setting min-height: 100%;. However, when I add a nested div and set height: 100%;, it doesn't stretch to container's height. Is there a way to fix it?

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>

解决方案

This is a reported webkit (chrome/safari) bug, children of parents with min-height can't inherit the height property: https://bugs.webkit.org/show_bug.cgi?id=26559

Apparently Firefox is affected too (can't test in IE at the moment)

Possible workaround:

• add position:relative to #containment
• add position:absolute to #containment-shadow-left

The bug doesn't show when the inner element has absolute positioning.

See http://jsfiddle.net/xrebB/

Edit on April 10, 2014

Since I'm currently working on a project for which I really need parent containers with min-height, and child elements inheriting the height of the container, I did some more research.

First: I'm not so sure anymore whether the current browser behaviour really is a bug. CSS2.1 specs say:

The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'.

If I put a min-height on my container, I'm not explicitly specifying its height - so my element should get an auto height. And that's exactly what Webkit - and all other browsers - do.

Second, the workaround I found:

If I set my container element to display:table with height:inherit it acts exactly the same way as if I'd give it a min-height of 100%. And - more importantly - if I set the child element to display:table-cell it will perfectly inherit the height of the container element - whether it's 100% or more.

Full CSS:

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

#container {
  background: green;
  display: table;
  height: inherit;
  width: 100%;
}

#content {
  background: red;
  display: table-cell;
}

The markup:

<div id="container">
  <div id="content">
      <p>content</p>
  </div>
</div>

See http://jsfiddle.net/xrebB/54/.

这篇关于父母与最小高度内的孩子：100％不继承高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！