uniapp设置100vh导致滚动条问题如何解决？

在uniapp中设置了height:100vh后，页面底部出现了多余的滚动条，即使内容高度不足也会出现。尝试过设置overflow:hidden但无效，有没有办法彻底解决这个问题？在H5和APP端都遇到了类似情况，求具体解决方案。

2 回复

在App端或H5中，100vh可能包含地址栏等区域，导致滚动条异常。解决方法：

  1. 使用height: 100%替代，配合页面根元素设置高度
  2. 使用CSS变量--status-bar-height等动态计算
  3. 通过uni.getSystemInfoSync()获取窗口高度，设置固定高度值

在 UniApp 中，设置元素高度为 100vh 可能导致滚动条问题，常见原因是 vh 单位包含了浏览器地址栏等 UI 元素的高度，导致实际高度超出视口。以下是解决方案：

1. 使用 100% 替代 100vh

将父容器高度设为 100%，并确保根元素（如 page）高度为 100%：

page {
  height: 100%;
}
.container {
  height: 100%;
}

2. 动态计算高度（推荐）

使用 uni.getSystemInfoSync() 获取窗口高度，并设置为元素高度：

export default {
  data() {
    return {
      windowHeight: 0
    }
  },
  onLoad() {
    const systemInfo = uni.getSystemInfoSync();
    this.windowHeight = systemInfo.windowHeight;
  }
}

<template>
  <view :style="{ height: windowHeight + 'px' }">内容</view>
</template>

3. 使用 CSS 的 height: 100vh 并隐藏溢出

如果必须用 vh，可尝试隐藏滚动条：

.container {
  height: 100vh;
  overflow: hidden;
}

4. 处理移动端兼容性

在 App.vue 中设置全局样式，确保页面占满屏幕：

page {
  height: 100%;
}

总结

优先使用动态计算高度的方法，兼容性更好。避免直接使用 100vh 在移动端的潜在问题。

回到顶部