absolute元素height:100%无效，因其依赖包含块的可计算高度；仅设position:relative不够，父元素还需显式高度（如height:400px或min-height:100vh），否则子元素高度为0px。
不能“继承”百分比高度——height: 100%不是继承，而是计算其包含块（containing block）的可用高度。absolute 元素的包含块由最近的非 static 定位祖先决定，若找不到，就回退到视口。所以问题本质是：你得先让那个“最近的非 static 祖先”有可计算的高度。
为什么加了 position: relative 还是没用？
因为 position: relative 只是“入场券”，它让父元素成为包含块，但不提供高度基准。如果父元素自身 height: auto（比如没设高、没内容撑开、或只靠 flex 自动伸展），那么它的可用高度就是 0，子元素 height: 100% 就算出来也是 0px。
- 常见现象：开发者工具里看到 computed
height是0px或auto - 移动端尤其明显：
html和body没设height: 100%，整条链从根就断了 - Safari 14–15.6 有个隐藏坑：即使父级写了
height: 100vh，子元素height: 100%也可能被忽略；可加min-height: 0强制触发继承逻辑
top: 0; bottom: 0; 比 height: 100% 更可靠
当你要的是“填满定位上下文的垂直空间”，直接用 top 和 bottom 更稳定，它不依赖父元素高度是否可计算，只要定位上下文存在（即父级有 position: relative/absolute/fixed）就能生效。
- 必须显式写
position: absolute，不能靠继承或默认值 - 通常要配
left: 0; right: 0;或width: 100%才能横向也拉满 - 注意盒模型：
box-sizing: border-box能避免padding导致内容溢出 - 如果内容极少，想自动收缩，得加
min-height: 0并配合overflow: auto
滚动容器（overflow: auto）里 height: 100% 的陷阱
在设置了固定高度和 overflow: auto 的容器里，height: 100% 指的是容器的“设置高度”，不是整个滚动内容高度（scrollHeight）。伪元素（如 ::before）或 absolute 子元素用这个方式永远填不满内容区。
- 不要指望
height: 100%在滚动容器里适配内容总高 - 若需覆盖整个可滚动区域，得用 JS 监听
scrollHeight动态设高，或改用position: sticky+inset（现代方案） - Flex/Grid 容器默认不创建定位上下文，即使加了
overflow: hidden也无法裁剪 absolute 子元素——必须额外加position: relative
最常被忽略的一点：所有中间层父容器（从 html 到你那个 position: relative 的父级）都得有明确高度或最小高度；漏掉任意一层，height: 100% 就会断在那一层。而 top/bottom 方案只依赖最近定位祖先的存在，对中间链无要求——这才是它更鲁棒的根本原因。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
