如何在出现水平滚动条时调整100vh高度，避免多余垂直滚动条？

这个问题其实是因为 100vh 是基于原始视口高度计算的——当水平滚动条出现时，它会占用一部分垂直空间，导致你的 #root 元素的 100vh 高度超出了实际可用的视口高度，所以垂直滚动条也跟着出来了。下面给你两种可行的解决方法：

方法一：使用现代CSS动态视口单位（推荐） #

现代浏览器支持动态视口单位 dvh 和 dvw，它们会自动排除滚动条占用的空间。简单来说，100dvh 等于当前可用的视口高度（如果有水平滚动条，就自动减去滚动条的高度），100dvw 同理。

修改后的代码如下：

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body {
  margin: 0;
  height: 100dvh;
  width: 100dvw;
  overflow: hidden; /* 禁止body出现滚动条，让#root自己处理滚动逻辑 */
}

#root {
  height: 100%; /* 继承body的100dvh高度，自动适配滚动条 */
  width: 100%; /* 继承body的100dvw宽度 */
  min-height: 800px;
  min-width: 600px;
  background: green;
  overflow: auto; /* 仅当触达min-height/min-width时显示滚动条 */
}
</style>
</head>
<body>
<div id="root"></div>
</body>
</html>

这样设置后：

• 当窗口宽度小于600px时，#root 会显示水平滚动条，此时 100dvh 已经自动减去了滚动条的高度，#root 的高度刚好适配剩余垂直空间，不会触发垂直滚动条；
• 只有当窗口高度小于800px时，才会显示垂直滚动条，完全符合你的需求。

方法二：JavaScript动态计算滚动条高度（兼容旧浏览器） #

如果需要兼容不支持 dvh 的旧浏览器（比如Chrome 98之前的版本），可以通过JavaScript动态计算水平滚动条的高度，再调整 #root 的高度。

代码示例：

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body {
  margin: 0;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

#root {
  width: 100%;
  min-height: 800px;
  min-width: 600px;
  background: green;
  overflow: auto;
}
</style>
</head>
<body>
<div id="root"></div>

<script>
function adjustRootHeight() {
  // 计算水平滚动条高度：视口总高度 - 文档可用高度（不含滚动条）
  const scrollbarHeight = window.innerHeight - document.documentElement.clientHeight;
  // 动态设置#root的高度
  document.getElementById('root').style.height = `calc(100vh - ${scrollbarHeight}px)`;
}

// 页面加载时初始化
window.addEventListener('load', adjustRootHeight);
// 窗口大小变化时重新计算
window.addEventListener('resize', adjustRootHeight);
</script>
</body>
</html>

这段代码会在页面加载和窗口 resize 时，自动计算滚动条高度并调整 #root 的高度，避免垂直滚动条不必要地出现。

注意：方法一的兼容性已经覆盖了绝大多数现代浏览器，如果你的项目不需要兼容老旧环境，优先选择第一种方案，更简洁且性能更好。

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