如何解决移动端使用100vh时出现意外纵向滚动与滚动条的问题

问题根因 #

移动端浏览器的100vh计算逻辑与PC端存在差异：计算时会包含浏览器自带的地址栏、底部操作栏等UI元素的高度，而页面实际可用的可视区域高度小于100vh，因此会触发纵向滚动。你的flex容器是按照100vh高度做的垂直居中，容器底部被挤出可视区域，视觉上就会出现盒子位置高于屏幕中心的情况。

修复方案 #

方案1：使用动态视口单位（优先） #

使用CSS新增的dvh（动态视口高度）单位替代vh，该单位会自动排除浏览器UI占用的高度，兼容绝大多数主流移动端浏览器，可直接修改.page的高度属性：

.page {
  display: flex;    
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh; /* 兼容不支持dvh的旧版本浏览器 */
  height: 100dvh;
  overflow: hidden; /* 额外避免意外滚动 */
}

同时建议给html、body补充溢出隐藏规则，避免默认滚动行为干扰：

html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

方案2：JS动态计算高度 #

如果需要兼容极旧的移动端浏览器，可通过JS实时获取窗口可视高度赋值给容器：

const setPageHeight = () => {
  document.querySelector('.page').style.height = `${window.innerHeight}px`
}
window.addEventListener('load', setPageHeight)
window.addEventListener('resize', setPageHeight)

内容的提问来源于stack exchange，提问作者howard