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 始终以物理屏高为准。

Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries

规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...

下载

• 典型现象包括：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+ 已稳定支持。但它不能裸用。

• 必须前置声明兜底：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 —— 这些地方一错，元素就飘走，而且很难定位。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！