如何让CSS计算100vh时排除水平滚动条高度？

100vh 计算取值时取的是浏览器视口的完整总高度，默认不会扣除水平滚动条占用的高度，一旦页面出现横向滚动条，用这个单位设置高度的元素就会比实际可视区域高，撑出多余的垂直滚动条。
注意不要踩坑：别写死滚动条高度做calc减法，不同系统、浏览器的滚动条渲染逻辑差异极大，MacOS默认滚动条悬浮不占页面空间，Windows传统滚动条高度在15-17px不等，硬写固定值必然出现适配问题。

1. 现代浏览器优先用新视口单位（零额外代码） #

CSS新增的小视口/动态视口单位计算时会自动扣除滚动条、浏览器自带UI（如移动端地址栏）的占用空间，兼容性覆盖Chrome 108+、Firefox 112+、Safari 15.4+，不需要兼容低版本浏览器的话优先选这个方案：

.class-name {
  /* 固定取排除占用项后的可视高度，不会随浏览器UI伸缩变化 */
  height: 100svh;
  /* 如果需要适配移动端地址栏收起/展开的动态变化，可以替换为100dvh */
  /* height: 100dvh; */
}

2. 全兼容纯CSS方案（适配所有浏览器） #

利用百分比高度的计算逻辑：百分比高度基于父元素的实际可用空间计算，会自动扣除滚动条占用的尺寸，只需要从根节点开始层层设置高度100%即可：

/* 先重置默认边距，避免浏览器默认8px边距造成高度误差 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body {
  height: 100%;
}
/* 如果目标元素有嵌套的祖先节点，所有祖先节点都需要添加height: 100% */
.class-name {
  height: 100%;
}

这个方案的缺点是嵌套层级深的元素需要给所有祖先节点加高度属性，维护成本稍高，但没有任何兼容性问题。

3. JS动态计算（适配所有场景+低版本浏览器） #

window.innerHeight 原生API返回的就是视口扣除滚动条后的实际可用高度，可以通过JS监听尺寸变化动态给元素赋值，适配要求高的场景可以用这个方案：

const targetEl = document.querySelector('.class-name')
const setCorrectHeight = () => {
  targetEl.style.height = `${window.innerHeight}px`
}
// 页面初始化时执行一次
setCorrectHeight()
// 监听窗口尺寸变化重新计算，建议加防抖避免频繁触发影响性能
window.addEventListener('resize', setCorrectHeight)

如果页面有多个元素需要用到这个高度，可以配合CSS自定义属性统一管理，减少重复代码：

:root {
  /* 兜底用100vh，JS加载前先保证基础展示效果 */
  --viewport-height: 100vh;
}
.class-name {
  height: var(--viewport-height);
}
.other-class {
  min-height: var(--viewport-height);
}

对应JS只需要给根节点赋值即可：

const setVh = () => {
  document.documentElement.style.setProperty('--viewport-height', `${window.innerHeight}px`)
}
setVh()
window.addEventListener('resize', setVh)

内容的提问来源于stack exchange，提问作者Bear Bile Farming is Torture