为何父元素未设高度时，子元素百分比高度继承最近设高的祖先？

首先明确CSS中百分比高度的核心规则：

• 元素设置height: 百分比时，高度是基于其包含块的高度计算，而非仅直接父元素。
• 只有当包含块的高度为显式指定值（非auto）时，百分比高度才会生效；若包含块高度为auto（依赖内容推导），则百分比高度会被解析为auto，即元素高度由自身内容决定。

回到你的示例：

<html>
<body>
<div id="A"  style="height: 500px;">
  <div id="B" style="height: 10px;"></div>
  <div id="C" >
    <div id="D" style="height: 100%;">123</div>
  </div>
</div>
</body>
</html>

• 元素C的高度为auto（未显式设置），它是D的包含块，但由于高度为auto，D的height:100%会被解析为auto，最终高度就是文本“123”的高度，并非继承A的500px。
• 你看到的“D继承A高度”的现象大概率是视觉误解（比如未添加边框区分元素层级，误以为D占满了A的高度）。

如果想让D的高度等于A的高度，需要给C也添加height:100%：

<div id="C" style="height: 100%;">
  <div id="D" style="height: 100%;">123</div>
</div>

此时C的包含块是A（显式高度500px），C的高度会被计算为500px，D的height:100%基于C的高度生效，最终高度为500px。

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