移动端 height: 100% 失效的根本原因是浏览器缺乏高度基准，需 html 和 body 同时设 height: 100% 且 margin: 0，中间每层父容器也须显式定义高度，否则 computed height 为 auto 将导致后续百分比计算失败。
不是写法错，是浏览器根本没找到可算的高度基准——移动端 height: 100% 失效，90% 的情况是因为 html 或 body 被重置、中间某层父容器是 auto 高度，或者它压根就不是“包含块”。
html 和 body 必须同时设 height: 100% 且清空 margin
很多 UI 框架（比如 Vant、Ant Design Mobile）或 CSS reset 会悄悄把 body 的 height 设为 auto，或者加了默认 margin。只写 html { height: 100% } 不够，只写 body { height: 100% } 也不行，必须两者都写，且带上 margin: 0：
html, body {
height: 100%;
margin: 0;
}
否则 DevTools 里看到的 body 的 computed height 很可能还是 auto —— 这条链从起点就断了。
中间每一层父容器都得显式声明高度
你写的 .content { height: 80% } 真正参照的是它的**直接父元素**的 computed height。如果中间夹着 .page → .main → .content，那 .page 和 .main 都得有明确高度，不能靠内容撑开：
-
.page是position: relative但没设height？→ 它的 height 是auto，子元素的80%就是0px -
.main用了display: inline-block或float: left？→ 它不再是标准包含块，height: 100%会 fallback 到html，而html又没高 - 某层加了
transform或will-change？→ 同样可能破坏包含块关系
最可靠验证方式：打开 DevTools，逐层点开目标元素的父节点，在 Computed 面板里看每一层的 height 值是不是具体像素（比如 720px），而不是 auto。
Flex 容器里 height: 100% 更容易失效
Flex 子项默认靠 align-items: stretch 拉伸，但这个行为极易被干扰：
- UI 库常重置
min-height: 0，导致子项有文字时最小高度不为 0，height: 100%被忽略 -
align-self: flex-start直接关掉拉伸，再写height: 100%也无效 - 父容器没设
min-height: 0，子项即使写了flex: 1也可能不占满
别硬推 height: 100%，优先用 flex: 1 + min-height: 0 组合：
.container {
display: flex;
flex-direction: column;
}
.main-content {
flex: 1;
min-height: 0; /* 关键！防 UI 库重置破坏拉伸 */
}
别迷信 100vh，它在移动端更危险
height: 100vh 看似绕过链路，实则引入新问题：
- iOS Safari 地址栏收起/展开时，
100vh值会突变，页面跳动明显 - 用户双指缩放后，
vh不随布局缩放，但height: 100%链路下的计算反而更稳 - 固定定位头部下方用
100vh，常留白或溢出；应改用calc(100dvh - 64px)（dvh是动态视口单位，iOS 16.4+ 支持） - 滚动容器内嵌
100vh元素，会脱离滚动上下文，造成内容不可见
真正要盯住的，从来不是“怎么写”，而是 DevTools 里那一层层 computed height 值——只要有一层是 auto，后面全白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
