移动端100vh高度超出问题的解决方案

移动端网页开发过程中，100vh 是一个非常常见的布局单位，开发者通常会使用它实现全屏页面、弹窗遮罩、登录页、移动端应用首页等效果。然而，在 iOS Safari、Android 浏览器等移动设备环境中，直接使用 height: 100vh 经常会出现页面高度超出、底部留白、滚动条异常等问题。

造成这一问题的主要原因是移动端浏览器地址栏、底部工具栏等动态 UI 会影响可视区域高度，而传统 CSS 中的 vh 单位并不会实时反映浏览器可见区域变化。因此，理解移动端 100vh 的计算机制，并采用合理的解决方案，是提升移动端页面体验的重要环节。

一、移动端100vh高度超出的原因分析

在桌面浏览器中，100vh 通常等于浏览器窗口的高度：

CSS
.container {
    height: 100vh;
}

页面能够准确铺满整个屏幕。

但是在移动端环境中，浏览器顶部地址栏和底部导航栏会动态显示或隐藏。例如：

• 页面刚打开时，浏览器地址栏占据部分空间；

• 用户向下滑动时，地址栏隐藏，可视区域变大；

• 用户向上滑动时，地址栏重新出现，可视区域变小。

部分移动浏览器在计算 100vh 时，会直接使用设备最大视口高度，而不是当前实际可见高度。

例如：

• 手机屏幕高度：800px；

• 浏览器地址栏高度：80px；

• 实际内容区域：720px。

此时：

CSS
height: 100vh;

可能得到：

800px

导致页面内容超过可视区域，出现底部滚动或被遮挡的问题。

二、使用min-height替代固定height

很多场景下，并不需要强制固定高度，可以使用 min-height 代替：

CSS
.page {
    min-height: 100vh;
}

相比：

CSS
.page {
    height: 100vh;
}

min-height 允许内容自然扩展，不容易造成内容被截断。

适用于：

• 移动端首页；

• 内容展示页面；

• 长列表页面；

• 表单页面。

不过，该方式无法完全解决 Safari 中 vh 计算偏大的问题，因此还需要结合其他方案。

三、使用100dvh解决移动端高度问题

现代浏览器提供了新的视口单位：

• svh：小视口高度；

• lvh：大视口高度；

• dvh：动态视口高度。

其中：

CSS
height: 100dvh;

会根据浏览器地址栏显示状态动态调整高度。

示例：

CSS
.container {
    height: 100dvh;
}

相比传统：

CSS
height: 100vh;

100dvh 更符合移动端全屏布局需求。

目前主流移动浏览器已经逐渐支持该单位，例如：

• Safari 15.4+；

• Chrome Android 新版本；

• Edge 移动版。

为了兼容旧浏览器，可以采用渐进增强写法：

CSS
.container {
    height: 100vh;
    height: 100dvh;
}

浏览器支持 dvh 时会自动覆盖旧值。

四、通过CSS变量动态计算真实高度

对于需要兼容更多旧版本 Safari 的项目，可以通过 JavaScript 获取真实视口高度。

示例：

JavaScript
function setViewportHeight() {
    const vh = window.innerHeight * 0.01;
    document.documentElement.style.setProperty('--vh', `${vh}px`);
}

setViewportHeight();

window.addEventListener('resize', setViewportHeight);

CSS中使用：

CSS
.container {
    height: calc(var(--vh) * 100);
}

原理：

假设：

JavaScript
window.innerHeight = 700;

那么：

JavaScript
--vh = 7px;

最终：

CSS
height: calc(7px * 100);

得到：

700px

即真实可见区域高度。

这种方式在移动端项目中应用非常广泛，尤其适合：

• Vue项目；

• React项目；

• H5活动页面；

• 混合App页面。

五、针对iOS Safari底部安全区域处理

除了 100vh 超出问题，iPhone 刘海屏、底部 Home Indicator 也可能导致内容遮挡。

可以结合：

CSS
env(safe-area-inset-bottom)

进行适配。

例如：

CSS
.footer {
    padding-bottom: env(safe-area-inset-bottom);
}

全屏布局：

CSS
.page {
    min-height: 100dvh;
    padding-bottom: env(safe-area-inset-bottom);
}

这样可以避免底部按钮被遮挡。

六、Vue项目中解决100vh超出问题

在Vue移动端项目中，可以封装一个通用方法：

JavaScript
export function setRemHeight() {
    const setHeight = () => {
        document.documentElement.style.setProperty(
            '--app-height',
            `${window.innerHeight}px`
        );
    };

    setHeight();

    window.addEventListener('resize', setHeight);
}

入口文件调用：

JavaScript
import { setRemHeight } from './utils/viewport';

setRemHeight();

组件中：

CSS
.full-page {
    height: var(--app-height);
}

相比直接使用 100vh，这种方式能够适应移动端浏览器动态变化。

七、避免使用overflow导致二次滚动

很多开发者在解决高度问题时，会添加：

CSS
body {
    overflow: hidden;
}

虽然可以暂时隐藏滚动条，但可能导致：

• 页面无法滚动；

• 输入框弹起异常；

• iOS滚动失效。

如果必须限制页面滚动，可以针对具体容器处理：

CSS
.wrapper {
    height: 100dvh;
    overflow-y: auto;
}

不要直接限制整个 body。

八、不同方案适用场景对比

九、移动端100vh最佳实践

目前较推荐的写法：

CSS
.page {
    min-height: 100vh;
    min-height: 100dvh;
}

如果需要兼容旧设备：

JavaScript
const updateHeight = () => {
    document.documentElement.style.setProperty(
        '--vh',
        `${window.innerHeight * 0.01}px`
    );
};

updateHeight();

window.addEventListener('resize', updateHeight);

CSS：

CSS
.page {
    height: calc(var(--vh) * 100);
}

同时结合：

CSS
padding-bottom: env(safe-area-inset-bottom);

可以覆盖大部分移动端场景。

十、总结

移动端 100vh 高度超出问题，本质上是浏览器视口计算方式与真实可见区域不一致造成的。传统 vh 单位适用于桌面环境，但在移动端需要考虑地址栏变化、安全区域以及动态视口。

对于现代项目，优先推荐使用：

CSS
height: 100dvh;

并结合：

CSS
env(safe-area-inset-bottom)

进行安全区域适配。

如果需要兼容老版本移动浏览器，则可以使用 JavaScript 动态计算 window.innerHeight，通过 CSS 变量控制页面高度。合理选择方案，可以有效解决移动端页面溢出、底部空白以及布局错乱等问题，提升H5页面和移动端应用的稳定性。