移动端容器高度塌陷本质是高度计算链断裂，应使用min-height: 100dvh配合display: flow-root（浮动场景）或显式锚定父级高度（flex/grid场景），而非height: 100%或overflow: hidden。
移动端容器高度塌陷，本质是高度计算链断了——不是 CSS 写错了，而是浏览器没“看到”该撑高的依据。直接结论：min-height: 100dvh + display: flow-root（浮动场景）或 min-height 显式锚定父级（Flex/Grid 场景），比硬写 height: 100% 或滥用 overflow: hidden 更可靠。
为什么 height: 100% 在移动端几乎总失效
它依赖父元素有明确高度，但移动端 html 和 body 在地址栏收放、软键盘弹出时，window.innerHeight 动态变化，CSS 不重算百分比，导致子元素高度归零。iOS Safari 尤其明显：地址栏缩起后，100vh 仍按原始视口算，底部留白；弹出键盘后，dvh 才真正反映可见区域。
-
min-height: 100dvh是当前最稳的视口高度兜底，Chrome 105+、Safari 16.4+ 支持，但老安卓 WebView 需降级为min-height: 100vh - 不要对
html或body直接设min-height，某些安卓 WebView 会忽略；作用于主容器如.app或#root更有效 - 若内容可能超一屏，必须用
min-height，否则height会截断内容
浮动布局下父容器塌陷：优先用 display: flow-root
移动端浮动虽已过时，但存量项目仍有。旧方案如 overflow: hidden 在安卓 WebView 中易导致 position: fixed 导航栏定位异常、z-index 失效、阴影被裁剪；而 display: flow-root 是专为解决此问题设计的值，无副作用。
-
display: flow-root仅对含float子项的容器生效，对 Flex/Grid 父容器无效（它们本就不会塌陷） - 兼容性已足够：Chrome 64+、Firefox 58+、Safari 15.4+（即 iOS 15.4+），2026 年可放心用
- 兜底写法必须用
@supports，不能只 fallback 到overflow: hidden：.container { display: flow-root; }@supports not (display: flow-root) { .container { overflow: hidden; } }
Flex/Grid 容器自身高度为 0：问题出在父级没锚定
Flex/Grid 容器不自带“固有高度”，它只响应可用空间。当子项写 flex: 1 或 height: 100% 时，若父级是 height: auto，整条链路就塌了——这不是容器的问题，是上层没给它测量基准。
- 修复点永远在 Flex/Grid 容器的**直接父元素**，给它加
min-height（如min-height: 300px或min-height: 100dvh） - 避免在 Flex/Grid 容器自己身上写
height: 100%，除非你确认所有祖先都明确定义了高度 - 子项含图片时，记得设
img { height: auto; }或宽高比容器，否则初始渲染仍可能塌
网格容器（grid）高度塌陷：警惕脱离文档流的子项
Grid 容器高度为 0，常见原因是子项用了 position: absolute 或 float——这些元素脱离文档流，Grid 算法根本不计入它们的高度。
- 绝对定位子项必须配
top/bottom/left/right，否则仍可能干扰布局计算 - Grid 内混用
float是无效且危险的：浏览器忽略float，但 clearfix 类仍可能触发意外重排 - 更健壮的撑开方式是轨道定义：
grid-template-rows: minmax(min-content, auto)，让每行至少容纳内容最小高度 - IE 不支持
minmax()，需降级为min-height+ JS 检测
真正卡住人的，从来不是某个属性不会用，而是忘了高度必须从某一层“锚定”下来——这个锚点得是浏览器能稳定测量的值，比如 dvh、显式 min-height，或者一个真实存在的非脱离流子元素。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
