Chrome移动端地址栏导致NuxtJS网页出现多余滚动如何用CSS修复

问题核心原因 #

移动端Chrome的默认100vh是按照地址栏隐藏时的最大视口高度计算的，地址栏显示时实际可用可视高度会小于这个值，你当前配置的height: 100%继承的根元素高度依然基于最大视口高度计算，因此内容会溢出出现滚动条。

纯CSS解决方案 #

可以使用CSS规范新增的动态视口单位实现适配，这是W3C标准推荐的原生方案，没有任何hack逻辑：

• svh：对应最小可视视口高度，即地址栏始终显示时的可用高度
• dvh：对应动态可视视口高度，会自动跟随地址栏的显示/隐藏状态实时调整高度

你可以修改样式如下，同时保留原有配置作为旧浏览器降级：

html,
body,
#__nuxt,
#__layout {
  margin: 0;
  padding: 0;
  /* 旧浏览器降级配置 */
  height: 100%;
  /* 动态高度适配，优先级更高 */
  height: 100dvh;
  /* 禁止外层页面滚动 */
  overflow: hidden;
}

补充说明 #

如果你的业务逻辑需要页面局部区域滚动，只需要给对应内部容器加上overflow: auto属性即可，外层保持overflow: hidden就能避免页面整体出现滚动条。
目前全球超过95%的移动端浏览器都已支持dvh/svh单位，如果你需要兼容2022年底之前的极旧版本浏览器，再考虑添加少量JS兜底逻辑即可。

内容的提问来源于stack exchange，提问作者Théo Lavaux