移动端浏览器中设置 100vh 却出现滚动条？

🎉 写在前面你是否遇到过这样的诡异场景：明明设置了 height: 100vh，却在移动端意外触发了滚动条？本文将从底层原理到实战方案为你彻底剖析这一经典陷阱，并提供多种可靠解决方案。

以下是对问题的详细解答：

一、现象原因分析

浏览器UI元素的动态特性 ：移动浏览器（如Chrome、Safari）的地址栏、工具栏等界面组件会根据用户操作（如滚动页面）自动显示或隐藏。这种动态行为会导致视口（viewport）的可用高度发生变化，但 100vh 的值始终基于初始隐藏状态下的视口高度计算，而非实时变化的可见区域高度。
视口高度计算偏差 ：当地址栏从隐藏变为可见时，实际可用视口高度会减小，但 100vh 仍保持原值，导致内容超出可视区域，触发滚动条。
浏览器厂商差异 ：不同浏览器对视口高度的计算逻辑存在差异，例如 iOS Safari 更倾向于将 100vh 视为未包含地址栏的高度。

二、解决方案

✅方案1：动态计算视口高度 + CSS 变量（推荐）

核心思路 ：通过 JavaScript 实时获取 window.innerHeight（当前可视区域高度），将其转换为 CSS 变量，并在样式中使用该变量替代 100vh。

实现步骤：

JavaScript 部分 ：监听窗口大小变化事件，动态更新 CSS 变量。

javascript 复制代码

function setViewportHeight() {
  const innerHeight = window.innerHeight ; 
  document.documentElement.style.setProperty('--innerHeight', `${innerHeight}px`);
}
window.addEventListener('resize', setViewportHeight);
setViewportHeight(); // 初始化

CSS 部分 ：使用自定义变量控制元素高度。

css 复制代码

.fullscreen {
  height: var(--innerHeight);
  background: pink;
  overflow: hidden; /* 避免子内容溢出 */
}

优势：

✔️ 完美适配各种设备状态变化

✔️ 兼容所有支持 CSS 变量的现代浏览器

✔️ 无需修改现有布局结构

✅方案2：绝对定位 + 全屏覆盖

适用场景：简单布局且需完全覆盖屏幕的元素。
实现代码：
css 复制代码
```
.fullscreen {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: lightblue;
}
```
注意：

⚠️ 如果父元素不是 body，需确保其父级链上的所有元素都有 height: 100%

⚠️ 此方法会脱离文档流，可能影响其他元素布局

适用场景：
- 模态对话框/加载动画等临时全屏组件
- 视频播放器等需要强制全屏的场景

✅方案3：使用动态视口单位（dvh）

实验性方案 ：部分现代浏览器支持 dvh（Dynamic Viewport Units），可直接响应视口变化。
css 复制代码
```
.fullscreen {
  height: 100dvh; /* 根据最新标准动态计算 */
}
```
现状： 📱 仅部分现代浏览器支持（Chrome 88+、Edge 88+） 🚫 iOS Safari 暂未支持 👉 适合作为渐进增强方案，需配合 fallback 使用

💡 经验之谈：无论采用哪种方案都能解决大多数问题，如果不行可以叠加其他方案试试，只用不断地尝试，不断优化适配策略。