移动端地址栏显示时100vh适配问题如何解决？

要实现应用占满屏幕无滚动条，同时忽略移动端浏览器地址栏的占位高度，可以用以下两种方案实现：

CSS原生方案（优先推荐） #

使用CSS动态视口单位dvh，该单位会自动根据移动端地址栏的显隐调整高度适配可用视口，不需要额外JS逻辑：

/* 全局样式重置，避免默认边距撑高容器 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* html、body以及应用根容器统一设置高度 */
html, body, #app {
  /* 100dvh = 动态视口可用高度，自动排除地址栏占位 */
  height: 100dvh;
  max-height: 100dvh;
  /* 禁止全局内容溢出滚动 */
  overflow: hidden;
}

/* 兼容不支持dvh单位的旧浏览器 */
@supports not (height: 100dvh) {
  html, body, #app {
    height: 100vh;
  }
}

JS兼容方案（适配旧设备） #

如果需要兼容老旧不支持dvh的设备，可以通过JS实时计算可用视口高度注入CSS变量实现：

1. 注入JS逻辑计算高度：

// 计算当前可用视口高度，写入CSS全局变量
function setFullHeight() {
  const availHeight = window.innerHeight
  document.documentElement.style.setProperty('--full-height', `${availHeight}px`)
}
// 监听页面加载、窗口大小变化、屏幕旋转事件实时更新高度
window.addEventListener('load', setFullHeight)
window.addEventListener('resize', setFullHeight)
window.addEventListener('orientationchange', setFullHeight)
// 页面初始化时触发一次计算
setFullHeight()

2. CSS中使用注入的变量：

html, body, #app {
  height: var(--full-height, 100vh);
  max-height: var(--full-height, 100vh);
  overflow: hidden;
}

注意事项 #

• 内部模块如果需要滚动能力，单独给对应模块容器加overflow: auto属性即可，不要修改根容器的overflow规则
• 不要给html、body、应用根容器添加额外的margin、padding样式，避免容器高度被撑高出现滚动条
• 所有固定定位的全屏元素不要使用100vh设置高度，统一使用100dvh或var(--full-height)适配

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