CSS：Chrome 以 % 高度嵌套在具有最小高度的 div 中的 div 与其他浏览器不同答案

【问题标题】：CSS: Chrome interprets div with % height nested in div with min-height differently from other browsersCSS：Chrome 以 % 高度嵌套在具有最小高度的 div 中的 div 与其他浏览器不同
【发布时间】：2011-11-11 16:51:31
【问题描述】：

我有以下页面：

    <!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>

我的期望是一旦达到最小高度，内部 div 将保持外部 div 高度的 100%（两者都是 600 像素）。在 IE9 和 FF8 中就是这种情况。我认为这是正确的，基于 W3C：http://www.w3.org/TR/CSS2/visudet.html#the-height-property。

来自 W3C 页面：

百分比是根据生成框的包含块的高度计算的。如果包含块的高度没有明确指定（即，它取决于内容高度），并且该元素不是绝对定位的，则该值计算为 'auto'。

我的父元素有一个明确指定的高度，所以我认为不需要绝对定位。（对于它的价值，绝对定位外部 div 确实解决了问题 - 但它不应该是必要的。）

然而，在 Chrome 中，在外部 div 的最小高度被击中后，内部 div 会随着窗口大小的调整而缩小，而不是保持外部 div 高度的 100%，即 600px；

我想我有两个问题：哪种解释是正确的？有解决办法吗？

【问题讨论】：

标签： html css google-chrome

【解决方案1】：

解决方法很简单：

最简单的方法是添加“min-height: 600px;” （或“最小高度：继承；”）到#inner。
如果由于某种原因您需要从父级继承它，您可以执行以下操作：
1. 添加“位置：相对；”到#outer。
2. 添加“位置：绝对；顶部：0；右侧：0；底部：0；左侧：0；”并删除“宽度：100%；高度：100%；”来自#inner。

关于正确的解释：这是一个错误。您可以在此问题的答案中阅读更多相关信息：The inherited height of a child div from a parent with a min-height attribute

【讨论】：