百分比高度在定位元素上无效，是因为浏览器找不到有明确height值的包含块；绝对定位元素的height:100%依赖最近非static定位祖先，若无则回退至视口；修复需确保包含块有具体高度或改用top/bottom控制。
百分比高度在定位元素上无效，不是因为你写错了 height: 100%，而是浏览器根本没找到可计算的像素基准——它需要一个“有明确 height 值”的包含块，而这个包含块往往在你没注意的地方断了。
绝对定位元素的 height: 100% 为什么总按视口算
绝对定位元素（position: absolute）的百分比高度，不看 HTML 结构上的“父元素”，而是看最近的非 static 定位祖先（即 position: relative、absolute 或 fixed）。如果整条链上没有一个满足条件的祖先，浏览器就回退到视口，height: 50% 实际等于 50vh。
- 父元素写了
position: relative，但height是auto→ 子元素height: 100%算出来是100% × 0px = 0px - 父元素用了
float、display: inline或被transform触发新层叠上下文 → 它无法成为合法的包含块 - 用开发者工具选中该绝对定位元素 → 切到「Computed」面板 → 查看
height：如果是auto或具体值为0px，说明包含块失效
怎么快速确认并修复包含块断裂
别猜，直接查 computed height。从目标元素往上点，直到找到第一个 height: auto 的节点——那就是断点。
- 修复方式一：给最近的定位祖先加明确高度，比如
height: 400px、height: 80vh，或继承链式高度：html, body { height: 100%; } .container { position: relative; height: 100%; } .abs-child { height: 100%; } - 修复方式二：放弃
height，改用top/bottom控制区间，例如top: 60px; bottom: 20px;—— 更稳定，且完全不依赖父容器高度计算 - 特别注意 Safari 14–15.6：即使父级是
position: relative且height: 100vh，子元素height: 100%仍可能被忽略；可加min-height: 0强制触发继承逻辑，或直接在子元素上写height: 100vh（慎用，需评估视口变化影响）
Flex/Grid 容器里嵌套绝对定位，更容易踩坑
Flex 或 Grid 容器本身若没设 height，它的子项（包括绝对定位子元素）就依然没有高度上下文。更糟的是，align-items: stretch 或 grid-template-rows: 1fr 不会“赋予”容器高度，只分配已有空间。
- 不要在
display: grid容器上只写grid-template-rows: 1fr就指望子项height: 100%生效；必须额外加height: 500px或height: 100vh - Flex 容器中，
flex: 1可以撑开子项，但height: 100%依然要求父容器有明确像素高；混用flex: 1和height: 100%可能被浏览器忽略后者 - 绝对定位子元素要反向撑高父容器？不行——它已脱离文档流；父容器必须自己先有高度，否则子元素再怎么设
height都不影响布局
真正卡住人的，从来不是“有没有加 position: relative”，而是加了之后，它的 height 在 computed 面板里是不是一个具体数字。只要有一层是 auto，整条链就归零。打开开发者工具，逐层点开看，比反复改 CSS 有效十倍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
