为何CSS的height:100vh;规则在移动设备上超出视口高度？

问题根源 #

你遇到的问题是移动端Chrome对vh单位的特殊处理导致的：

• Chrome移动端的100vh是基于浏览器的最大视口高度（即地址栏完全收起时的屏幕高度），而非当前实际可见的视口高度。当地址栏展开时，实际可用的屏幕空间会小于100vh，因此header底部会超出视口被隐藏。
• Chrome开发者工具的移动端视图默认模拟地址栏收起的状态，所以你在调试时看不到问题，但真机上地址栏展开就会触发这个bug。

修复方案 #

方案1：使用动态视口单位dvh（推荐）

现代浏览器支持dvh（Dynamic Viewport Height）单位，它会根据当前实际可见的视口高度自动调整，完美适配地址栏的展开/收起状态。

修改你的CSS：

header{
  height: 100dvh; /* 替换原来的100vh */
  background: green;
  font-size: 22px;
}

如果需要header至少占满视口（内容超出时可以滚动），也可以用min-height: 100dvh。

方案2：基于百分比的降级方案（兼容旧浏览器）

如果需要兼容不支持dvh的旧浏览器，可以通过设置html和body的高度来实现：

html, body {
  height: 100%;
  overflow: hidden; /* 可选，防止body出现滚动条 */
}

header{
  height: 100%;
  background: green;
  font-size: 22px;
  overflow-y: auto; /* 如果header内容超出，允许内部滚动 */
}

这个方法让html和body占满当前实际视口高度，header继承这个高度，会随视口变化自动调整。

方案3：JavaScript动态计算（精细控制）

如果需要更灵活的控制，可以通过JS监听视口变化，动态设置header高度：

// 防抖函数，避免频繁触发
function debounce(func, delay = 100) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, args), delay);
  };
}

function updateHeaderHeight() {
  const header = document.querySelector('header');
  header.style.height = `${window.innerHeight}px`;
}

// 初始化
updateHeaderHeight();
// 监听视口变化和滚动（地址栏展开/收起会触发scroll）
window.addEventListener('resize', debounce(updateHeaderHeight));
window.addEventListener('scroll', debounce(updateHeaderHeight));

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