CSS：父高度：自动和子高度：100％的定义行为是什么？

debugcn 发表于 Dev

加博尔·基斯·瓦莫西

如果将父母的身高为，auto并将2个孩子的身高height:100%放在彼此下方，则定义的行为是什么。例如：

<html>
    <style>
        .cont {
            height: auto;
            background-color:silver;
        }
        .box {
            width:50px;
            height:100%;
        }
    </style>
    <body>
        <div class="cont">
            <div class="box" style="background-color:yellow;"> a </div>
            <div class="box" style="background-color:red;"> b </div>
        </div>
    </body>
</html>

https://codepen.io/kisvegabor/pen/XWXVQOX

在Chrome和Firefox中，子级（或多或少）与屏幕大小相同，但在CodePen中，其高度适合内容。

阿罗奇

您尚未为HTML指定DOCTYPE，因此正常的CSS规则会通过在怪癖模式下呈现的页面进行修改。

Quirks模式生活标准中介绍了您看到的这种效果

3.5。百分比身高计算怪癖

在怪癖模式下，出于计算元素元素高度的目的，如果元素的position属性的计算值是相对的或静态的，则元素的height属性的指定值是<percentage>，而元素没有的显示属性的计算值是table-row，table-row-group，table-header-group，table-footer-group，table-cell或table-caption，元素的包含块必须使用以下算法，在返回值的第一步中终止：

假设element是包含element的最接近祖先（如果有）。否则，返回初始包含块。

如果element具有表单元格的display属性的计算值，则返回UA定义的值。

如果element具有不为auto的height属性的计算值，则返回element。

如果element具有的position属性的计算值是绝对的，或者如果element不是块容器或表包装盒，则返回element。

跳到第一步。

遵循此算法，并考虑了怪癖规则3.6。html元素填充了视口怪癖和3.7。body元素填补了html元素的怪癖，您将看到.box元素的100％高度是body元素的计算高度的100％，即高度视口的100％减去body元素具有的默认边距。

Codepen自动将DOCTYPE添加到您的标记中，因此上述怪异模式规则不适用。相反，.box元素的高度由百分比高度的常规CSS规则确定，该规则指出在您的情况下“所用高度的计算就像指定了'auto'一样”，然后10.6.3块级不可替换当“溢出”计算为“可见”时，表示正常流动中的元素，该高度表示元素内容的高度。