绝对定位元素的height百分比参照最近非static定位祖先的计算高度，而非父元素显式高度；它基于padding box，受内容撑开影响，不响应min-height或滚动高度。
百分比高度在绝对定位下“看似生效”，其实只是参考系变了——它不再依赖父元素的 height 是否显式设置，而是直接找最近的 position: relative/absolute/fixed/sticky 祖先，拿它的实际计算高度当基准。
绝对定位元素的 height 百分比到底参照谁
非绝对定位元素（如普通 div）的 height: 80% 必须依赖父容器有明确高度（height: 300px 或 height: 100% 且其祖先链全有高度），否则退化为 auto；而绝对定位元素不同：
- 它的包含块（containing block）是最近的、
position不为static的祖先元素（不一定是直接父级） -
height: 100%是相对于该祖先的**计算高度**（computed height），哪怕这个祖先没写height，只要内容撑开了，高度就真实存在 - 这个计算高度包含
padding和border（即基于 padding box），而非 content box
为什么 height: 100% 在 position: absolute 下常被误认为“更可靠”
常见错觉：给一个没设 height 的 .parent { position: relative; } 放个 .child { position: absolute; height: 100%; }，结果子元素真填满了——但这不是因为“百分比变灵了”，而是因为：
-
.parent高度由子内容撑开（比如里面有几行文字），浏览器算出它的 computed height 是 124px -
.child的height: 100%就是 124px，刚好匹配 - 一旦你清空
.parent内容，它高度塌成 0，.child的 100% 也变成 0 —— 它依然严格守规矩
position: absolute + 百分比宽高的典型陷阱
你以为在用百分比做响应式，实际可能踩进三个隐性坑：
- 父级没设
position？那包含块会一路往上找，甚至落到html或视口，导致偏移完全失控 - 祖先设置了
overflow: auto但高度固定（如height: 200px），此时height: 100%只按 200px 算，不会随滚动内容变高 -
top: 50%和transform: translateY(-50%)混用：前者基于祖先高度，后者基于自身高度，叠加后偏移量 = 祖先高×50% − 自身高×50%，极易错位
什么时候该信绝对定位的百分比，什么时候不该
它不是“修复方案”，而是一种**参考系切换手段**：
- 适合：需要锚定到某个已定位容器（如弹窗、下拉菜单、遮罩层），且该容器高度由内容自然决定
- 不适合：想让子元素随窗口缩放等比拉伸——这时
vh、Flexbox或Grid更可控 - 特别注意：如果祖先用了
min-height但没设height，绝对定位子元素的height: 100%仍以实际计算高度为准，min-height不参与百分比换算
真正容易被忽略的点是：绝对定位下的百分比宽高，和你肉眼看到的“父容器大小”常常不是一回事——它只认包含块的 computed height，不认视觉占位、不认 min-height、不认滚动内容高度。盯住开发者工具里的 Computed 面板看实际 height 值，比猜更管用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
