移动端 safari 中 height: 100% 失效的根本原因是高度继承链断裂，需 html 和 body 同时设 height: 100%，且中间所有父容器 computed height 必须为具体像素值而非 auto，否则链路中断。
因为 height: 100% 在移动端 Safari 中不是“写错了”，而是整条高度继承链从根上就断了——html 和 body 默认没有高度，子元素的百分比根本无处可算。
html 和 body 必须同时设 height: 100%
浏览器计算 height: 100% 时，只看**直接父元素的 computed height**。如果 body 的父元素 html 是 height: auto（默认值），那 body { height: 100% } 就等于 100% × 0px = 0px，后面所有嵌套层全失效。
- 必须显式写：
html { height: 100%; }和body { height: 100%; }，缺一不可 - 某些 CSS reset（如 Normalize.css）会把
html的height重置为auto或0，得手动覆盖 - 顺手加
margin: 0; padding: 0;，避免默认边距干扰高度传递
中间任意父容器都可能“断链”
即使 html 和 body 都写了 height: 100%，只要中间某一层父容器的 computed height 是 auto，100% 就立刻失效。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 常见断点：父容器用了
display: inline、display: table-cell、float: left、position: absolute—— 这些会让它脱离文档流，不再作为子元素的“包含块” - Flex 容器中，若子项有
min-height: 0（很多 UI 库默认加），会压制align-items: stretch，此时height: 100%也无效；需显式设min-height: auto - 用开发者工具逐层点开目标元素的每个父级 →「Computed」→ 查
height值：出现auto就是断点，出现具体像素（如720px）才说明链路通了
100vh 能绕过链路，但代价是视口不稳定
100vh 不依赖父容器高度，所以常被当作“快捷解法”。但它在移动端 Safari 中绑定的是初始 layout viewport（含地址栏），滚动后地址栏收起，视口变高，100vh 却不更新，导致内容被裁切或留白。
- 软键盘弹出、横竖屏切换、地址栏收放都会让
100vh值“卡死”，而height: 100%同样不响应这些变化 - 不要对
position: absolute元素用height: 100%：它的包含块若没高度，结果仍是0px - 更稳的替代方案：
top: 0; bottom: 0;（适用于遮罩、弹窗等绝对定位场景）
真正该盯住的，是开发者工具里每个父级的「Computed」→ height 值。不是改十遍 CSS，而是确认每一层是否传下了具体像素高度——这才是移动端 Safari 里 100% 能否撑开的唯一判断依据。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
