我有以下页面:
<!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>
我的期望是，一旦达到最小高度(两者均为 600 像素)，内部 div 将保持外部 div 高度的 100%。 IE9和FF8就是这种情况。我认为这是正确的，基于 W3C:http://www.w3.org/TR/CSS2/visudet.html#the-height-property .
来自 W3C 页面:
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'.
我认为我的父元素有一个明确指定的高度，所以不需要绝对定位。 (对于它的值(value)，绝对定位外部 div 确实解决了问题 - 但它不应该是必要的。)
然而，在 Chrome 中，在达到外部 div 的最小高度后，内部 div 会随着窗口大小的调整而缩小，而不是保持外部 div 高度的 100%，即 600px；
我想我有两个问题:哪种解释是正确的？有解决办法吗？
最佳答案
变通部分很简单:
最简单的方法是添加“最小高度:600 像素；” (或“最小高度:继承；”)到#inner。
如果出于某种原因您需要从父级继承它，您可以执行以下操作:
- 添加“position:relative；”到#outer。
- 添加“position:absolute；顶部:0；右侧:0；底部:0；左侧:0；”并删除“宽度:100%；高度:100%；”来自#inner。
关于正确的解释:这是一个错误。您可以在这个问题的答案中阅读更多相关信息:The inherited height of a child div from a parent with a min-height attribute
关于html - CSS:Chrome 以与其他浏览器不同的方式解释嵌套在具有最小高度的 div 中的 % 高度的 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8097270/