使用100vh出现水平滚动条？React+Bootstrap场景问题排查

核心原因 #

你遇到的问题本质是垂直滚动条占用水平空间导致的：

• 两个height:100vh的元素叠加后总高度达到200vh，浏览器会显示垂直滚动条。
• 垂直滚动条本身占据约10-17px的水平宽度，而width:100vw是基于完整视口宽度（未扣除滚动条占用空间）计算的，这就导致元素实际宽度超出了页面的可用内容宽度，进而触发水平滚动条。
• 调整width无效，是因为只要垂直滚动条存在，100vw就会始终比页面可用宽度宽出滚动条的尺寸；而把height设为绝对值后，总高度未超出视口，垂直滚动条消失，自然不会有水平滚动问题。

可行解决方案 #

方案1：用width:100%替代100vw

将.fullvisual的宽度改为100%，它会继承父元素的宽度（父元素会自动扣除垂直滚动条的占用空间），从根源避免元素超出：

.fullvisual{
    width: 100%;
    height: 100vh;
}

方案2：临时禁用水平滚动（治标）

如果确实需要保留100vw，可以给body添加水平滚动禁用，但不推荐长期使用（可能隐藏其他布局隐患）：

body {
    overflow-x: hidden;
}

方案3：用min-height替代height（按需选择）

如果你的内容高度存在动态变化的可能，用min-height:100vh替代height:100vh，这样当内容不足时占满视口，内容超出时自动延伸，避免不必要的垂直滚动条（此方案适用于单元素场景，你的双全屏元素场景可根据需求调整）：

.fullvisual{
    width: 100%;
    min-height: 100vh;
}

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