子级父级最小高度100％不继承高度 [英] child inside parent with min-height 100% not inheriting height
问题描述
style.css
html，body
{
height：100％;
}
body
{
margin：0;
padding：0;
}
#containment
{
width：60％;
min-width：780;
min-height：100％;
margin：0 auto 0 auto;
padding：0;
background：＃ff2;
}
＃containment-shadow-left
{
background：url（images / shadow-left.png）left repeat-y;
padding-left：16px;
height：100％;
}
page.html
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Strict // EN
http://www.w3.org/TR/xhtml1 /DTD/xhtml1-strict.dtd\">
< html xmlns =http://www.w3.org/1999/xhtml>
< head>
< title> X< / title>
< meta http-equiv =content-typecontent =text / html; charset = utf-8/>
< link rel =stylesheethref =style.css/>
< / head>
< body>
< div id =containment>
< div id =containment-shadow-left>
Hello World！
< / div>
< / div>
< / body>
< / html>
我发现一种方法，使div容器至少占据页面的整个高度， min-height属性为100％。但是，当我添加一个嵌套的div并将其高度设置为100％时，它不会拉伸到容器的高度。是否有办法修复它？
这是一个报告的webkit（chrome / safari） -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规范说：
百分比是根据
生成框的包含块的高度计算的。如果未明确指定包含
块的高度（即，它取决于内容
height），并且此元素不是绝对定位的，值
计算为'auto'。 / p>
如果我在容器上放置一个最小高度，则不会明确指定其高度 - 我的元素应该得到一个 auto height。这正是Webkit和所有其他浏览器所做的。
其次，我找到的解决方法：
如果我用 height：inherit 将容器元素设置为 display：table 就像我给它一个 min-height 100％的方式。更重要的是 - 如果我把子元素设置为 display：table-cell ，它将完美地继承容器元素的高度 - 无论是100％还是更多。 p>
完整的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>内容< / p>
< / div>
< / div>
请参阅 http ：//jsfiddle.net/xrebB/54/ 。
style.css
html, body
{
height: 100%;
}
body
{
margin: 0;
padding: 0;
}
#containment
{
width: 60%;
min-width: 780;
min-height: 100%;
margin: 0 auto 0 auto;
padding: 0;
background: #ff2;
}
#containment-shadow-left
{
background: url(images/shadow-left.png) left repeat-y;
padding-left: 16px;
height: 100%;
}
page.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>X</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div id="containment">
<div id="containment-shadow-left">
Hello World!
</div>
</div>
</body>
</html>
I found a way to make a div container to occupy at least full height of a page, by setting min-height property to 100%. However, when I add a nested div and set its height to 100%, it doesn't stretch to container's height. Is there a way to fix it?
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屋！
