怎样用CSS实现移动端100vh在手机端包含地址栏溢出问题-css教程-PHP中文网

100vh 在 iOS Safari 等移动端浏览器中“不够高”是因为其基于 layout viewport 计算，不随地址栏隐藏而更新；应优先使用响应 visual viewport 的 100dvh，降级用 @supports 或 visualViewport API 动态设置 CSS 变量。

怎样用css实现移动端100vh在手机端包含地址栏溢出问题

为什么 `100vh` 在 iOS Safari 和部分 Android 浏览器里“不够高”

移动端浏览器（尤其是 Safari）的地址栏会动态收起/展开，vh 单位在页面加载时按「当前可视窗口高度」计算，但这个高度包含地址栏——当用户滚动后地址栏隐藏，实际可视区域变大，100vh 却没重算，导致底部内容被“顶出”或留白。这不是 bug，是规范行为：CSS 视口单位基于 layout viewport，而非 visual viewport。

用 `100dvh` 替代 `100vh`（现代方案）

100dvh 是「dynamic viewport height」，它响应 visual viewport 变化，地址栏收起时自动拉伸。目前 Chrome 105+、Safari 16.4+、Firefox 112+ 均支持。

实操建议：

直接把 height: 100vh 换成 height: 100dvh，无需 JS 干预
加一层降级：用 @supports 判断，不支持时回退到 100vh 或 JS 补偿
注意：Safari 16.4 之前版本（如 iOS 16.3）不支持，需单独处理

.full-height {
  height: 100vh; /* fallback */
  height: 100dvh;
}
<p>@supports (height: 100dvh) {
.full-height {
height: 100dvh;
}
}</p>

用 `visualViewport` API + JS 动态更新（兼容旧版 Safari）

对 100dvh 不支持的环境（如 iOS visualViewport 的 resize 事件，手动设置自定义 CSS 变量。

关键点：

CSS工具箱(专业版)

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

下载

必须在 DOMContentLoaded 后执行，否则 visualViewport 可能未就绪
只在移动端初始化，桌面端没必要
避免高频触发重排：用 requestAnimationFrame 节流
初始值也要设一次，否则首屏可能错位

if ('visualViewport' in window) {
  const setDvh = () => {
    document.documentElement.style.setProperty(
      '--dvh',
      `${window.visualViewport.height}px`
    );
  };
  setDvh();
  window.visualViewport.addEventListener('resize', setDvh);
}

然后在 CSS 中使用：height: calc(var(--dvh, 100vh));