移动端100vh全屏Header高度溢出问题求助

问题根源 #

移动端浏览器的地址栏、底部操作栏会动态显示/隐藏，传统的100vh是基于**浏览器的总高度（包含工具栏）**计算的，当工具栏收起时，实际可视区域变小，但100vh的值不会自动调整，导致Header高度超出当前可视区域，出现滚动条。

解决方案 #

1. 使用动态视口单位（推荐）

现代浏览器支持dvh（Dynamic Viewport Height）单位，它会实时匹配当前的可视区域高度，自动忽略动态变化的工具栏：

header {
  height: 100dvh;
  /* 保留你原有的其他样式，比如display: flex、justify-content等 */
}

• 兼容性：目前Chrome、Firefox、Safari 15.4+都已支持，覆盖绝大多数现代移动端设备。

2. JavaScript回退方案（兼容旧浏览器）

如果需要兼容不支持dvh的旧版本浏览器，可以通过JS动态设置Header高度：

// 初始化设置高度
function setHeaderHeight() {
  const header = document.querySelector('header');
  header.style.height = `${window.innerHeight}px`;
}

// 页面加载和窗口 resize 时触发
window.addEventListener('load', setHeaderHeight);
window.addEventListener('resize', setHeaderHeight);

同时配合基础CSS重置，确保没有额外的边距影响：

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* 避免横向滚动 */
}

header {
  /* 移除原有的height:100vh */
  position: relative;
  width: 100%;
}

3. 额外优化：固定Header的显示

如果需要Header固定在可视区域不随滚动移动，添加position: fixed并覆盖全屏：

header {
  height: 100dvh;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100; /* 确保在其他内容上方 */
}
/* 若页面有其他内容，给body添加padding-top避免被Header遮挡 */
body {
  padding-top: 100dvh;
}

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