直接用min-h-[100dvh]替代min-h-screen并严格包裹@supports(min-height:100dvh)规则块，是当前唯一兼顾ios safari、chrome、微信x5内核和ssr渲染的解法；裸写height:100vh或仅兜底不包裹@supports会导致ios 15.x和微信中页面塌成一条线。
直接用 min-h-[100dvh] 替代 min-h-screen，并严格包裹 @supports (min-height: 100dvh) 规则块——这是当前唯一能同时兼顾 iOS Safari、Chrome、微信 X5 内核和 SSR 渲染的解法；裸写 height: 100vh 或只加兜底值不包 @supports，在 iOS 15.x 和微信里会彻底塌成一条线。
为什么 min-h-screen 在 iOS 和微信里会塌成一条线
min-h-screen 编译为 min-height: 100vh，而 iOS Safari（15.x 及更早）、微信 X5 内核根本不会动态更新 vh 值：页面加载时按物理屏高算（比如 iPhone 14 是 844px），但地址栏收起后视口变大，100vh 却卡在旧值上，导致内容被裁切或底部留白。键盘弹出时同理——vh 不变，容器高度却“缩水”。
- Android 部分 WebView（如华为、UC）甚至忽略整个
100vh声明，样式完全不生效 -
min-h-screen在 SSR 渲染中还可能因服务端无window对象而 fallback 为空，首屏直接无高度 - 哪怕你写了
min-h-screen flex-1，若父容器没flex flex-col，flex-1就没空间可分，主区域照样塌陷
怎么正确用 min-h-[100dvh] 并兼容老环境
100dvh 是动态视口单位，随地址栏、键盘伸缩实时变化，iOS 16.4+、Chrome 109+、Firefox 117+ 已稳定支持。但它不能裸用，必须靠 @supports 控制生效范围：
- 错误写法：
.page { min-height: 100vh; min-height: 100dvh; }→ 老 Safari 忽略第二行，新 Safari 仍走第一行 - 正确写法：
.page { min-height: 100vh; } @supports (min-height: 100dvh) { .page { min-height: 100dvh; } }→ 兜底在外，新特性在内 - Tailwind 中需启用 arbitrary value 支持（v3.3+ 默认开启），直接写
min-h-[100dvh]即可 - 构建工具如 PostCSS 若自动把
dvh降级为vh，必须关掉该插件（例如postcss-100vh-fix）
绝对定位元素设了 min-h-[100dvh] 还没反应？
百分比高度（包括 100dvh）依赖包含块（containing block）的高度，不是“强制占满屏幕”。常见于 fixed 弹窗、抽屉菜单、底部按钮等场景：
- 父容器（如
body或直接祖先）没设min-h-[100dvh]或显式高度 → 子元素的100dvh实际计算为 0 - 别对
position: absolute/fixed元素用height: 100dvh，改用top-0 bottom-0更可靠（它不依赖父容器高度） - 侧边栏用
fixed时，必须加inset-y-0 left-0，而不是仅inset-0，避免 RTL 或其他定位干扰 - 若父容器本身也靠 JS 注入的
--vh驱动，需确保初始化完成后再渲染子元素，否则读到的是初始 1px
真正麻烦的不是写错单位，而是混合使用 dvh 和 svh，或者在 position: fixed 元素上直接套 100dvh 却没设包含块高度——这些地方一错，fixed 元素就飘走，而且很难定位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
