Html CSS：父身高：自动和子身高：100%的定义行为是什么？

如果父级高度为

auto

，且其中两个子级的

height:100%

，则定义的行为是什么。例如：

续{
高度：自动；
背景颜色：银色；
}
.盒子{
宽度：50px；
身高：100%；
}
A.
B

---

在Chrome和Firefox中，孩子们（或多或少）都有屏幕大小，但在CodePen中，他们的高度与内容相符。

您没有给HTML一个DOCTYPE，因此正常的CSS规则会被在quirks模式下呈现的页面修改

中描述了您看到的这种效果

在“怪癖”模式下，用于计算 元素的位置属性的计算值 元素是相对的或静态的，即高度的指定值 元素的属性是，而元素没有 表行中显示属性的计算值， 表格行组、表格页眉组、表格页脚组、表格单元格或 表标题，必须计算元素的包含块 使用以下算法，在返回的第一步中止 a值：

假设元素是包含元素块的最近祖先 有一个。否则，返回初始包含块

如果元素的显示属性的计算值为 表单元格，然后返回UA定义的值

如果元素的高度属性的计算值不是 自动，然后返回元素

如果元素的position属性的计算值为 绝对值，或者如果元素不是块容器或表 包装框，然后返回元素

跳到第一步

按照此算法，并考虑到怪癖规则，您将看到

.box

元素的100%高度是body元素计算高度的100%，即高度视口的100%减去body元素的默认边距

Codepen会自动将DOCTYPE添加到您的标记中，因此上述怪癖模式规则不适用。相反，

.box

元素的高度由的常规CSS规则确定，该规则表示在您的情况下“使用的高度是按照指定了“auto”的方式计算的”，然后表示高度是元素内容的高度