CSS：Chrome 对嵌套在 min-height 的 div 中的 % height 的 div 的解释与其他浏览器不同
我有以下页面：
<!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>
我的期望是，一旦达到最小高度（两者均为 600px），内部 div 将保持外部 div 高度的 100%。 IE9和FF8就是这种情况。我认为这是正确的，基于 W3C： http:// /www.w3.org/TR/CSS2/visudet.html#the-height-property。
来自 W3C 页面：
百分比是根据生成的盒子的包含块的高度计算的。如果未明确指定包含块的高度（即，它取决于内容高度），并且该元素未绝对定位，则该值计算为“auto”。
我认为我的父元素有明确指定的高度，因此不需要绝对定位。 （就其价值而言，绝对定位外部 div 确实可以解决问题 - 但这不是必需的。）
然而，在 Chrome 中，在外部 div 的最小高度达到之后，内部 div 会随着窗口大小的调整而缩小。击中，而不是保留外部 div 高度的 100%，600px；
我想我有两个问题：哪种解释是正确的？有解决方法吗？
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?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
解决方法部分很简单：
最简单的方法是添加“min-height: 600px;” （或“min-height：继承；”）也添加到#inner。
如果由于某种原因您需要从父级继承它，您可以执行以下操作：
关于正确的解释：这是一个错误。您可以在这个问题的答案中阅读更多相关信息：子 div 从具有 min-height 属性的父级继承的高度
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:
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