CSS height calc遇滚动条时Spinner显示异常及居中问题修复

这个问题我之前也碰到过！核心原因是100vh的计算逻辑和页面滚动条的冲突：当页面出现垂直滚动条时，浏览器的视口宽度会被滚动条占用，但100vh还是基于无滚动条时的视口高度计算的，导致容器高度和实际可显示区域不匹配，Spinner的背景自然就显示不全了。而移除height属性后，容器高度无法撑满视口，Spinner的居中定位也就失效了。

给你两个靠谱的解决方案，按需选择：

方案一：用动态视口单位dvh替代100vh（推荐） #

现代浏览器都支持dvh（动态视口高度），它会自动根据当前页面的实际可用视口（包括是否存在滚动条）计算高度，完美解决滚动条导致的高度偏差问题。只需要修改你的媒体查询代码：

@media (min-width: 992px) {
  .container-fullheight {
    height: calc(100dvh - 140px);
    position: relative; /* 必须加这个，确保Spinner能相对于容器居中 */
  }
}

同时要保证你的Spinner组件的CSS是基于容器绝对定位居中的：

spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 你的Spinner其他样式（背景、动画等） */
}

这个方案零JS，代码改动最小，是最优解。

方案二：JS动态计算容器高度（兼容旧浏览器） #

如果需要兼容不支持dvh的旧浏览器（比如某些版本的Safari），可以用JS动态计算容器高度，监听窗口变化实时调整：

首先给容器加上position: relative确保Spinner居中：

.container-fullheight {
  position: relative;
}

@media (min-width: 992px) {
  /* 先去掉原来的height属性 */
}

然后添加JS代码：

function updateContainerHeight() {
  const container = document.getElementById('route-container');
  if (!container) return;

  // 只在大屏幕下计算高度
  if (window.innerWidth >= 992) {
    // window.innerHeight已经考虑了滚动条的占用，直接减去140px即可
    const targetHeight = window.innerHeight - 140;
    container.style.height = `${targetHeight}px`;
  } else {
    // 小屏幕下恢复默认高度
    container.style.height = '';
  }
}

// 页面初始化时执行一次
updateContainerHeight();
// 窗口大小变化时重新计算
window.addEventListener('resize', updateContainerHeight);

这样容器的高度会始终匹配当前页面的实际可用视口，Spinner既能正常显示背景，又能保持居中。

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