百分比高度在移动端失效是因为父级链路上至少有一层height为auto，导致浏览器无法计算具体像素值；必须显式设置html、body及所有中间容器的height:100%，并确保它们是包含块。
百分比高度在移动端失效，不是写法错，而是父级链路上至少有一层 height 是 auto —— 浏览器根本算不出 “100%” 对应多少像素。
为什么 height: 100% 在移动端写了也不生效
移动端常见场景：给一个 .content 设置 height: 80%，结果高度为 0 或仅撑开一行文字。原因和桌面端一致，但更容易被忽略：
- 很多移动端框架（如 Bootstrap、Vant）重置了
html或body的height，导致你写的html, body { height: 100% }被覆盖或未生效 - 使用
viewport缩放后（比如双指缩放），vh单位会失准，而百分比链路反而更稳定 —— 但前提是链路没断 - 某些 UI 库内部容器用了
display: inline-block或float，导致它不再是子元素的“包含块”，height: 100%自动回退到html，而html又没设高
必须显式设置的三层父元素：html、body、直接父容器
缺一不可。只写 html, body { height: 100% } 不够，因为你的目标元素可能嵌套在 .page → .main → .content 里，中间任意一层是 height: auto，就全白搭。
-
html, body必须加height: 100%且去掉默认margin（margin: 0） - 所有中间容器（比如
.page、.wrapper）都要显式写height: 100%，不能靠“继承”或“想当然” - 如果某层用了
position: absolute或display: inline，它就不是包含块，得换用position: relative或display: block
用 vh 替代 % 的真实代价
height: 100vh 看似一劳永逸，但在移动端要小心：
立即学习“前端免费学习笔记（深入）”；
- iOS Safari 地址栏收起/展开时，
vh值会突变，页面突然跳动或内容被遮挡 - 配合
overflow: auto时，100vh容器若在position: fixed头部下方，容易留白或溢出 - 用户缩放页面（Cmd/Ctrl +），
vh不随布局缩放，但height: 100%链路下的计算更符合视觉预期 - 真要用
vh，优先选max-height: 80vh+overflow: auto，而不是死锁height
检查是否生效的唯一可靠方式：开发者工具逐层看 Computed
别猜，直接打开 DevTools → 选中目标元素 → 切到 Computed 面板 → 找 height 值：
- 如果是
auto，说明上一级包含块没高度 - 如果是具体像素（如
428px），说明链路通了 - 点开每一级父元素，重复这个动作 —— 很多人卡在第三层，比如
.container上写了display: flex却忘了min-height: 0，导致子项无法拉伸
最常被跳过的一步，就是没打开工具确认 computed height 是否真的被计算出来。
