Question

我有以下页面：

    <!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％（两者都将是600px）。在IE9和FF8中就是这种情况。我认为这是正确的，基于W3C：http://www.w3.org/TR/CSS2/visudet.html#the-height-property。

从W3C页面：

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

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

然而，在Chrome中，内部div会在外部div的最小高度被击中后调整窗口大小而不是保持100％的外部div高度，600px;

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

Answer 1

解决方法部分很简单：

最简单的方法是添加“min-height：600px;” （或“min-height：inherit;”）也是#inner。
如果由于某种原因您需要从父母继承它，您可以执行以下操作：
1. 添加“position：relative;”到#outer。
2. 添加“position：absolute; top：0; right：0; bottom：0; left：0;”并删除“宽度：100％;高度：100％;”来自#inner。

关于正确的解释：这是一个错误。您可以在此问题的答案中详细了解此问题：The inherited height of a child div from a parent with a min-height attribute

CSS：Chrome使用嵌套在div中的％高度来解释div，其中min-height与其他浏览器不同

1 个答案: