absolute元素的height: 100%总按视口计算，因其包含块是最近非static定位祖先（relative/absolute/fixed），若无则回退至视口，使height: 50%等价于50vh；仅设position: relative不够，还需该祖先具备可计算高度（如height: 400px或min-height: 100vh），否则子元素height: 100%仍为0px。
absolute元素的height: 100%为什么总按视口算
因为它的包含块（containing block）不是你HTML里写的那个父
，而是最近的
position: relative、position: absolute 或 position: fixed 祖先。如果整条链上一个都没有，浏览器就回退到视口——height: 50% 就等于 50vh，和父容器高度完全无关。
常见错误现象：
● 你给父元素加了 position: relative，但子元素 height: 100% 还是塌成一条线
● 开发者工具里看到 computed height 是 0px 或 auto
● 页面在 Safari 14–15.6 上完全不生效，哪怕父级写了 height: 100vh
- 光设
position: relative不够，它只是“入场券”，还得有可计算的高度（比如height: 400px、min-height: 100vh或flex: 1） - 父元素若用了
display: flex但没配flex-direction: column和显式高度，height: 100%依然无基准 - Safari 14–15.6 有个特殊坑：即使父级是
position: relative且height: 100vh，子元素height: 100%也可能被忽略；可加min-height: 0强制触发继承逻辑
怎么快速验证并修复包含块断点
打开开发者工具，选中你的绝对定位元素，切到 Computed 面板，看 height 是否为具体像素值（如 240px）。如果不是，逐层往上点父节点，找到第一个 height: auto 的节点——那就是断点。
- 修复方式一：给最近的非
static定位祖先加明确高度，比如height: 400px或min-height: 80vh - 修复方式二：放弃
height，改用top/bottom控制区间，例如top: 60px; bottom: 20px;—— 更稳定，不依赖父高计算 - 别在同一个父容器里混用
height和flex，它们的尺寸逻辑冲突，容易让浏览器放弃解析百分比
移动端和滚动容器里的特殊表现
移动端 height: 100% 塌陷，往往是因为 html 和 body 都没设高度，导致整个链路从根就断了；而滚动容器（overflow: auto）里，height: 100% 只参照容器的固定高度，不是内容总高度。
- 移动端必须同时写
html { height: 100%; }和body { height: 100%; }，中间所有父容器也得显式设高或min-height - 伪元素（如
::before）在滚动容器里设height: 100%+position: absolute，只会贴着容器可视区高度，不是整个 scrollHeight；此时不能靠 CSS 百分比解决 - 键盘弹出、地址栏收起、横竖屏切换都会让父容器高度波动，导致
top: 30%这类定位“飘忽不定”——本质是参照物太小，不是百分比不准
position”，而是“设了之后它有没有可计算的高度”。position: relative 只是入场券，height 才是座位号。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
