height:100%依赖父元素的computed height值，若为auto则计算结果为0px；100vh直接取视口高度，不受父级限制但受地址栏、缩放等影响。
百分比高度计算依赖父元素 computed height
子元素写 height: 100% 时，浏览器只看**直接父元素的 computed height 值**。如果这个值是 auto（比如块级元素默认、Flex 容器未设高、position: absolute 的包含块没高），那 100% × 0px = 0px —— 不是样式被忽略，是真算出来为 0。
常见错误现象：
-
html, body { height: 100% }写了，但中间某层.wrapper是display: inline或float: left，它不构成包含块，链路在第二层就断 - 父容器用了
min-height: 400px却没写height，height: 100%不认min-height - UI 框架（如 Ant Design）悄悄加了
min-height: 0，压制了 Flex 子项的拉伸行为
用 DevTools 快速定位哪一层断了
别猜，直接打开开发者工具，选中目标子元素 → 切到「Computed」面板 → 看 height 行：
- 如果是
auto，说明它的直接父容器没传下高度 - 如果是具体像素（如
720px），说明链路通了，问题在更上层或子元素自身 - 逐层点开父节点重复检查：从子元素 → 父 →
body→html，重点盯第三、四层，比如某个.modal-body被position: relative包裹但没设高
Flex 容器里子项 height: 100% 还是无效？换 flex: 1
Flex 容器本身默认 height: auto，子项写 height: 100% 等于在无基准前提下硬算，基本白搭。
- 优先用
flex: 1（等价于flex: 1 1 0）：它从flex-basis: 0开始拉伸，吃掉剩余空间，不依赖父容器有没有显式height - 确保父容器是
display: flex或display: inline-flex - 若必须保留
height语义（比如响应式切换），可组合写：min-height: 30%; flex: 1; - 删掉冗余的
align-self: stretch和height: 100%同时存在，Safari 旧版本可能出 bug
100vh 看似简单，但真实项目里容易翻车
height: 100vh 绕过百分比链路，直接取视口高度，一写就见效。但它绑定的是“当前视口”，不是“父容器”：
- iOS Safari 地址栏收起/展开时，
vh值重算，页面突然跳动 - 父容器设了
overflow: auto，子元素用100vh会溢出该容器，脱离滚动上下文 - 有
position: fixed头部时，100vh仍按全屏算，底部常留白或被遮挡 - 用户缩放页面（Ctrl + / Cmd +），
vh不随布局缩放，而百分比链路下的height: 100%更稳定
真正卡住你的，往往不是 html 或 body，而是中间那个没被注意到的 div —— 它可能被框架加了 min-height: 0，或者只是因为 display: inline 失去了包含块资格。不打开 DevTools 逐层点开看 computed height，就永远在猜。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
