CSS：Chrome将div高度嵌套在div中的div解释为与min-height嵌套的div，与其他浏览器不同 [英] CSS: Chrome interprets div with % height nested in div with min-height differently from other browsers
问题描述
我有以下页面：
<！DOCTYPE html>
< html>
< head>
< style type =text / css>
html，body
{
height：100％;
}
#outer
{
width：80％;
min-width：600px;
身高：80％;
min-height：600px;
margin：0 auto;
border：2px红色;
}
#inner
{
height：100％;
宽度：100％;
border：2px蓝色;
}
< / style>
< / head>
< body>
< div id =outer>
< div id =inner>
< / div>
< / div>
< / body>
< / html>
我的期望是内部div将保持100％外部div的高度，高度被击中（都将是600px）。 IE9和FF8就是这种情况。我认为这是正确的，基于W3C： http：/ / /www.w3.org/TR/CSS2/visudet.html#the-height-property 。
来自W3C网页：
百分比是根据生成的箱子的包含块的高度进行计算的。如果包含块的高度没有明确指定（即，它取决于内容高度），并且该元素没有被绝对定位，则该值计算为'auto'。
我的父元素有一个明确指定的高度，所以不需要绝对定位。 （对于它的价值，绝对定位外部div可以解决问题 - 但它不应该是必须的。）
然而，在Chrome中，内部div随着在外部div的最小高度被击中之后窗口的大小调整，而不是剩下100％的外部div的高度，600px;
我猜我有两个问题：哪个解释是正确的？是否有解决方法？
解决方法部分很简单： ol> 最简单的方法是添加min-height：600px; （或min-height：inherit;）。＃b $ b 如果由于某种原因，您需要出于某种原因从父母继承它可以做以下事情：
I have the following page:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body
{
height:100%;
}
#outer
{
width:80%;
min-width:600px;
height:80%;
min-height:600px;
margin: 0 auto;
border:2px dashed red;
}
#inner
{
height:100%;
width:100%;
border:2px dashed blue;
}
</style>
</head>
<body>
<div id="outer">
<div id="inner">
</div>
</div>
</body>
</html>
My expectation is that inner div will remain 100% of the height of the outer div once the min-height is hit (both will be 600px). This is the case in IE9 and FF8. I think that this is correct, based on the W3C: http://www.w3.org/TR/CSS2/visudet.html#the-height-property.
From the W3C page:
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'.
My parent element has an explicitly specified height, so no need for the absolute positioning, I would think. (For what it's worth, absolutely positioning the outer div does solve the problem- but it shouldn't be necessary.)
In Chrome, however, the inner div shrinks with the resizing of the window after the min-height on the outer div is hit, instead of remaining 100% of the height of the outer div, 600px;
I guess I have two questions: which interpretation is correct? Is there a workaround for this?
Workaround part is easy:
Easiest way is to add "min-height: 600px;" (or "min-height: inherit;") to the #inner too.
If for some reason you need to for some reason inherit it from parent you can do following:
- Add "position: relative;" to #outer.
- Add "position: absolute; top: 0; right: 0; bottom: 0; left: 0;" and remove "width: 100%; height: 100%;" from #inner.
About the right interpretation: It's a bug. You can read more about this in answers to this question: The inherited height of a child div from a parent with a min-height attribute
这篇关于CSS：Chrome将div高度嵌套在div中的div解释为与min-height嵌套的div，与其他浏览器不同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
