100dvh能解决iOS Safari中100vh高度不准确问题，但必须用@supports(min-height:100dvh)包裹整条规则并前置min-height:100vh兜底，否则iOS15及更早版本会忽略声明导致页面塌陷。
直接换 100dvh 就能解决，但必须用 @supports (min-height: 100dvh) 包裹整条规则，否则 iOS 15 及更早版本会完全忽略它，元素高度退化为 auto，页面视觉上“塌陷”或消失。
为什么 100vh 在 iOS Safari 里会跳动
iOS Safari 的 100vh 是按页面加载瞬间的视口（含地址栏）计算的静态值，之后滚动、地址栏收起、键盘弹出都不会更新。比如 iPhone 13 加载时算出 812px，地址栏一收，可视区域变成 762px，但 100vh 还卡在 812px，结果容器比屏幕高，底部多白边、触发意外滚动条，或者内容被裁切。
这不是 bug，是 Safari 对「视口」的定义和规范一致 —— 它把工具栏区域纳入了初始视口基准，而 Chrome/Firefox 始终以物理屏高为准。
- 典型现象包括：
overflow: hidden失效、position: fixed元素错位、全屏轮播图顶部被遮、底部按钮上浮 -
100svh和100lvh在 Safari 中无效：Safari 17.4 仍未实现 CSS Values and Units Level 5，写上去会被直接忽略 -
height: 100%不可靠：依赖父容器高度，而html和body默认是auto，没显式设高就退化为空
怎么正确写 100dvh 并兼容老系统
100dvh 表示“此刻用户真正看到的可视区域高度”，地址栏收/展、键盘弹出时自动响应，iOS 16.4+、Chrome 109+、Firefox 114+ 已稳定支持。但它不能裸用。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
立即学习“前端免费学习笔记（深入）”；
- 必须前置声明兜底：
min-height: 100vh写在@supports外面，否则老 Safari 直接跳过整条规则 -
@supports必须包裹整条规则，不能只包值 —— 错写成min-height: 100vh; min-height: 100dvh;会导致新 Safari 仍走第一行 - 正确写法：
.full { min-height: 100vh; }@supports (min-height: 100dvh) { .full { min-height: 100dvh; } } - Tailwind 用户可直接用
min-h-[100dvh]（v3.3+ 默认支持 arbitrary value），但需关掉 PostCSS 自动降级插件（如postcss-100vh-fix）
100dvh 在 position: fixed 或绝对定位元素上为啥不生效
百分比高度（包括 100dvh）依赖包含块（containing block）的高度。如果父容器没设高度，子元素的 100dvh 实际计算为 0。
- 对
position: fixed或absolute元素，优先用top: 0; bottom: 0;替代height: 100dvh，它不依赖父容器高度，更可靠 - 侧边栏等固定定位组件，应加
inset-y-0 left-0，而非仅inset-0，避免 RTL 或其他定位干扰 - 若父容器本身靠 JS 注入的
--vh驱动，需确保变量初始化完成后再渲染子元素，否则读到的是初始1px - 背景图抖动问题也源于此：不要用
background-attachment: fixed+100vh，改用position: fixed+object-fit图片方案
真正麻烦的不是单位选错，而是混用 dvh 和 svh，或在没设包含块高度的 fixed 元素上硬套 100dvh —— 这些地方一错，元素就飘走，而且很难定位。
