如何在Safari中解决CSS的100vh滚动溢出问题-css教程-PHP中文网

100vh在iOS Safari中撑出滚动条，是因为其按设备物理屏高（如812px）计算1vh，而非当前可见视口（如762px），导致100vh实际为812px，超出可视区域约50px；滚动后地址栏收起，但100vh不更新，引发裁切、留白或滚动条。

如何在safari中解决css的100vh滚动溢出问题

为什么100vh在Safari里会撑出滚动条

不是你写错了，是 Safari（尤其是 iOS 15 及更早、macOS Monterey 及之前）把地址栏高度算进了 100vh。页面刚加载时地址栏挂着，window.innerHeight 是 762px，但 1vh 却按设备物理屏高（比如 812px）计算为 8.12px，于是 100vh 实际被解析成 812px——比你能看见的区域高约 50px。滚动后地址栏收起，视口变大，但 100vh 值不更新，内容就被裁切、底部留白，甚至触发横向或纵向滚动条。

@supports (min-height: 100dvh) 必须包裹整条规则

裸写 min-height: 100dvh 或只包值是危险操作：iOS 15.x 及旧 WebView 直接忽略该声明，元素高度回退为 auto，页面视觉上“塌陷”成一条线。

@supports 检测的是浏览器是否支持该 CSS 声明，不是某个值；必须包裹整个选择器块
外层先写兜底：.page { min-height: 100vh; }

再用 @supports 替换：

@supports (min-height: 100dvh) {
  .page { min-height: 100dvh; }
}

别写成 min-height: 100vh; min-height: 100dvh; —— 新 Safari 仍走 100vh，根本没触发 dvh

绝对定位元素设了 100dvh 为啥没反应

100dvh 不是“强制占满屏幕”，它依赖包含块（containing block）的高度。常见于弹窗、遮罩层、固定底部按钮等场景。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

父容器（如 body 或直接祖先）没设 min-height: 100dvh 或显式高度 → 子元素 100dvh 实际计算为 0
对 position: absolute 元素，更稳妥的是用 top: 0; bottom: 0; 替代 height: 100dvh，只要父容器是 position: relative 或 fixed
若父容器靠 JS 动态 --vh 驱动，需确保变量已初始化完成，否则子元素读到的是初始 1px

JS 动态设 --vh 是最稳兜底方案

当遇到 iOS 15 及以下、微信内置 WebView、或某些 dvh 行为不稳定环境时，JS 是唯一能精确响应每次视口变化的路径。

必须在 DOMContentLoaded 后立即执行一次，否则首屏渲染用的是地址栏未收起时的错误初始值
后续监听 resize 和 scroll（加防抖），因为地址栏收放、键盘弹出、横竖屏切换都会改变 window.innerHeight
注意：html 和 body 上不能有 transform、filter、opacity 等创建新层叠上下文的属性，否则会干扰 window.innerHeight 取值和 --vh 生效