为什么CSS中设置height百分比属性无法正常生效？

• CSS 百分比高度的计算规则是相对于当前元素的直接父元素的已定义高度值生效，如果父元素没有设置明确的、可被浏览器计算的高度值，子元素的百分比高度会自动失效。
• 当前代码中.BoxHeight设置了height: 100%，但它的上层父元素<body>、<html>根节点均未配置高度属性，导致.BoxHeight的100%没有参考基准，无法计算出实际渲染高度，进一步导致子元素#Box的80%高度配置也无法生效。

补全所有上层父节点的高度定义，给<html>和<body>都设置100%高度即可，修改后的CSS代码如下：

/* 补全顶层元素高度定义 */
html, body {
  height: 100%;
  margin: 0; /* 清除浏览器默认边距，避免多余滚动条 */
}

.BoxHeight {
  height: 100%;
}

#Box {
  margin-top: 0%;
  margin-left: 3%;
  width: 90%;
  height: 80%;
  background-color: red;
}

原HTML代码无需修改即可正常渲染出预期高度的红色区块。

内容的提问来源于stack exchange，提问作者Ilo