绝对定位元素的height: 50%按视口计算，因其包含块是最近的非static定位祖先；若无此类祖先，则回退至视口，导致height: 50%等价于50vh。
绝对定位元素的height: 50%为什么总按视口算
因为它的包含块（containing block）不是你看到的“最近那个
”，而是最近的
position: relative、position: absolute 或 position: fixed 祖先。如果整个祖先链里一个都没设，浏览器就直接回退到视口（viewport）——于是 height: 50% 就等于 50vh，和父容器高度完全无关。
检查父级是否真能当“包含块”用
光看 HTML 结构没用，得看实际生效的 position 值。以下情况会让父元素“失去资格”：
- 父元素是
position: static（默认值）→ 不构成包含块 - 父元素虽然写了
position: relative，但没设height→ 它的计算高度仍是auto，子元素height: 100%还是算成0px - 父元素用了
float或display: inline→ 百分比高度基本不支持 - 父元素被
transform或will-change触发了新的层叠上下文，但未显式设高 → 同样无法提供高度基准
怎么快速验证并修复
打开开发者工具，选中你的绝对定位元素，点 Computed 面板，看 height 是不是具体像素值。如果不是，往上逐层点父节点，找到第一个 height: auto 的节点，那就是断点。
- 修复方式一：给最近的定位祖先加明确高度，比如
height: 400px或max-height: 80vh - 修复方式二：改用
top/bottom控制高度区间，例如top: 60px; bottom: 20px;—— 更稳定，且不依赖父高计算 - 别在绝对定位父容器里混用
height和flex，它们的尺寸逻辑冲突，容易让浏览器放弃解析百分比
Safari 14–15.6 的特殊坑
这些版本中，即使父级是 position: relative 且有 height: 100vh，子元素的 height: 100% 仍可能不生效。本质是 Safari 没把该父级识别为有效的包含块高度源。
立即学习“前端免费学习笔记（深入）”；
- 绕过办法：直接写
height: 100vh在子元素上（慎用，注意视口变化问题） - 更稳妥做法：用
top/bottom替代，或把父级改成position: fixed（需评估布局影响） - 若必须用百分比，可在父级加
min-height: 0，强制触发 Safari 的高度继承逻辑
position”，而是“设了之后它有没有可计算的高度”。position: relative 只是入场券，height 才是座位号。
