React移动端如何获取上下系统栏之间的可视视口高度？

该需求完全可以实现，以下是可落地的成熟解决方案：

方案1：CSS动态视口单位（优先推荐） #

现代浏览器已支持CSS视口相对单位的扩展规范，其中100dvh代表动态视口高度，会自动根据顶部地址栏、底部导航栏的显示/隐藏状态调整高度，天然适配所有移动端浏览器和设备场景。
使用示例：

/* 给根容器设置高度，vh作为旧浏览器兜底 */
.app-container {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: auto;
  box-sizing: border-box;
}

方案2：JavaScript实时计算（兼容性最优） #

如果需要兼容老旧浏览器，可以通过JS获取window.innerHeight，该属性返回的就是当前页面的实际可见高度，已经自动扣除了顶部地址栏、底部导航栏的高度，不需要手动计算上下栏尺寸。
使用步骤：

1. 全局注入CSS变量存储可视高度

function setVisibleHeight() {
  const visibleHeight = window.innerHeight;
  document.documentElement.style.setProperty('--visible-height', `${visibleHeight}px`);
}
// 初始化计算
setVisibleHeight();
// 监听场景变化实时更新
window.addEventListener('resize', setVisibleHeight);
window.addEventListener('orientationchange', setVisibleHeight);
window.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'visible') setVisibleHeight();
});

2. 在CSS中使用该变量设置容器高度

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}
.app-container {
  width: 100%;
  height: var(--visible-height, 100dvh);
  overflow: auto;
}

适配补充：安全区域处理 #

针对刘海屏、底部手势条等异形屏场景，可配合系统安全区域变量避免内容被系统元素遮挡：

.app-container {
  padding-top: env(safe-area-inset-top, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
  box-sizing: border-box;
}

避坑说明 #

• 不要单独使用vh作为全屏高度单位，vh计算时包含了系统栏的高度，会出现内容被遮挡的问题
• 不要使用position: fixed做全屏容器定位，容易在屏幕旋转、滚动时出现布局偏移
• 所有父级容器不要设置固定高度，保证根容器高度可以正常继承

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