移动端 height: 100% 塌陷是因为 html/body 缺失高度基准，导致百分比退化为 auto；须同时设置 html、body 及所有父容器 height 或 min-height，且注意 Flex/Grid 容器自身需有高度。
为什么移动端 height: 100% 总是塌成一条线
不是你写错了，是浏览器根本没找到可算的高度基准。移动端页面默认 html 和 body 都是 height: auto，往上追溯没有明确像素高，height: 100% 就退化为 auto —— 内容少时直接缩成几像素高。
常见错误现象：.modal-content { height: 80%; } 在 iOS Safari 里几乎看不见，开发者工具里显示 computed height: 0px 或 auto；Android Chrome 可能略高一点，但横竖屏切换后位置突变。
- 检查
html, body是否写了height: 100%（必须同时写，缺一不可） - 确认中间所有父容器（比如
.wrapper、.page）都显式设了height或min-height，不能只靠内容撑开 - 特别注意：Flex/Grid 容器即使写了
flex: 1或grid-template-rows: 1fr，自身若没高度，子元素的百分比仍无效
position: absolute 元素的 height: 100% 为什么总按视口算
绝对定位元素不看 DOM 父子关系，只找最近的非 static 定位祖先。如果没找到，就 fallback 到视口 —— 所以你写了 height: 50%，结果占了屏幕一半，不是你预期的“父容器一半”。
容易踩的坑：.popup { position: relative; } 但它的 height 是 auto，子元素 height: 100% 实际算的是 100% × 0px = 0px；或者父容器用了 float、display: inline、transform，它就丧失了作为包含块的资格。
立即学习“前端免费学习笔记（深入）”；
- 用开发者工具选中该绝对定位元素 →「Computed」→ 看
height值，如果是0px或auto，说明包含块断了 - 修复优先级：给最近的定位祖先加
height: 100vh或min-height: 100vh（比height: 100%更稳） - 更推荐方案：放弃
height，改用top: 60px; bottom: 20px;，完全绕过高度继承链
移动端用 top: 30% 定位“飘忽不定”的真实原因
不是百分比不准，是参照物（父容器）高度太小。比如父容器只有 20px 高，top: 30% 就是 6px，键盘弹出、地址栏隐藏、横竖屏切换都会让父容器高度波动，位置自然乱跳。
调试关键点：选中父元素 →「Computed」→ 查 height，若显示 auto 且数值接近 0，就是根源。别信 padding-top 或 margin-bottom “看起来撑开了”，它们不参与百分比计算。
- 优先改用视口单位：
top: 10vh比top: 10%稳定得多（iOS 9.3+ / Android 4.4+ 全支持） - 避免混用：
top: calc(10vh + 20px)在旧版安卓 WebView 中可能失效，拆成纯单位更安全 - iframe 或 Shadow DOM 场景下，
top的参照物是 iframe 文档根或 Shadow Host，不是外层页面 —— 这点常被当成 bug 排查半天
Safari 14–15.6 下 height: 100% 被忽略的隐蔽问题
即使父级是 position: relative 且 height: 100vh，某些 Safari 版本仍会忽略子元素的 height: 100%。这不是 bug，是渲染引擎对继承链的处理差异。
实操建议：
- 在子元素上加
min-height: 0强制触发继承逻辑（轻量、无副作用） - 或直接写
height: 100vh，但需评估：视口变化（如 iOS 地址栏收起）会导致高度重算延迟，可能闪动 - Flex/Grid 容器内部嵌套绝对定位时，额外加一层
height: 0+min-height: 100%组合，比单写height: 100%更可靠
真正麻烦的从来不是写哪一行 CSS，而是你不知道哪一层父容器悄悄断掉了高度链 —— 开发者工具里逐级点开 computed height，比猜快十倍。
