iOS版Chrome文档高度计算异常，页面布局错位求助

这是个挺典型的移动端浏览器渲染缓存与视口计算偏差问题，我来帮你拆解原因和修复思路：

问题产生的原因 #

iPhone上的Google Chrome在完全关闭（清除后台）后重启时，会存在视口尺寸缓存复用的情况：它没有重新计算当前实际的可视视口高度，而是复用了之前会话中缓存的视口数据（比如带有地址栏的高度值）。

你用html, body { height: 100%; }的布局依赖于浏览器对根元素高度的准确计算，当浏览器错误地使用了缓存的旧高度值时，body的实际高度就会和当前可视视口不匹配，导致底部导航被挤出首屏。

另外移动端浏览器的地址栏、工具栏是动态显示/隐藏的，height:100%的计算逻辑在浏览器重启的特殊场景下，没能及时响应视口的动态变化，进一步加剧了这个问题。

修复方案 #

这里提供几个从易到难、从修复到根治的方案，你可以根据自己的布局选择：

1. 强制监听视口变化，实时重置高度 #

通过监听多种可能触发视口变更的事件，强制浏览器重新计算根元素高度，覆盖缓存的错误值：

function resetViewportHeight() {
  // 先设为auto触发重排，再设置为当前视口高度
  document.documentElement.style.height = 'auto';
  document.documentElement.style.height = `${window.innerHeight}px`;
}

// 监听视口 resize、屏幕旋转、页面从后台切回的事件
window.addEventListener('resize', resetViewportHeight);
window.addEventListener('orientationchange', resetViewportHeight);
document.addEventListener('visibilitychange', () => {
  if (!document.hidden) resetViewportHeight();
});

// 页面加载完成后也执行一次
window.addEventListener('load', resetViewportHeight);

2. 改用min-height:100%替代height:100% #

把根元素的高度设置从固定的height:100%改为min-height:100%，这样既保证内容不足时占满全屏，又允许浏览器在视口计算偏差时自动调整高度，避免元素被固定死在错误的高度上：

html, body {
  min-height: 100%;
  margin: 0;
}

3. 用Flexbox实现健壮的全屏布局（推荐） #

从布局层面彻底解决问题，不再依赖根元素的高度计算：把body设为垂直方向的Flex容器，让中间内容区自动撑开剩余空间，底部导航自然固定在底部：

html, body {
  height: 100%;
  margin: 0;
}
body {
  display: flex;
  flex-direction: column;
}
/* 你的中间内容容器 */
.main-content {
  flex: 1; /* 占满body的剩余空间 */
}
/* 底部导航不需要额外定位，自然在底部 */
.bottom-nav {
  /* 保留你原有的样式即可 */
}

这种方式的优势在于，Flexbox会自动根据当前视口高度分配空间，不受浏览器视口缓存的影响，是最稳定的解决方案。

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