问题描述
我有以下页面：
<！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：。
来自W3C网页：
我的父元素有一个明确指定的高度，所以不需要绝对定位。 （对于它的价值，绝对定位外部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:
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，与其他浏览器不同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！