设置100vw/100vh的背景视频为何出现横向滚动条？如何解决？

滚动条出现的原因 #

100vw 代表浏览器视口的完整宽度，但默认情况下浏览器的垂直滚动条会占据部分视口宽度空间。当你把元素宽度设为100vw时，这个宽度已经包含了滚动条的位置，但页面实际可用的内容宽度是「100vw - 滚动条宽度」，所以元素会超出页面可用范围，直接触发横向滚动条。

另外你给父容器加max-width:100%无效，是因为父元素.box本身已经设置了100vw的宽度，max-width:100%是相对于父元素宽度计算的，等于没做任何限制。

不用overflow-x:hidden的解决方法 #

方法1：用width:100%替代100vw #

width:100%是相对于父元素的可用宽度（自动扣除滚动条所占空间），不会出现超出情况，这是最简洁的解决方案：

body { margin: 0; padding: 0; box-sizing: border-box; }
.box { width: 100%; height: 100vh; }
.content1 { background-color: red; width: 100%; height: 100vh; }
.content2 { background-color: aliceblue; width: 100%; height: 100vh; }

<div class="box"> 
  <div class="content1"></div>
</div>
<div class="box"> 
  <div class="content2"></div>
</div>

方法2：动态扣除滚动条宽度（适合必须用vw的场景） #

如果因为需求必须使用vw单位，可以通过JS计算滚动条宽度，再用CSS变量配合calc()扣除这部分宽度：

body { margin: 0; padding: 0; box-sizing: border-box; }
.box { width: calc(100vw - var(--scrollbar-width)); height: 100vh; }
.content1 { background-color: red; width: calc(100vw - var(--scrollbar-width)); height: 100vh; }
.content2 { background-color: aliceblue; width: calc(100vw - var(--scrollbar-width)); height: 100vh; }

// 计算滚动条宽度并设置CSS变量
document.documentElement.style.setProperty('--scrollbar-width', `${window.innerWidth - document.documentElement.clientWidth}px`);

方法3：用布局特性自动占满宽度 #

借助CSS默认布局特性，让元素自动填充父容器可用宽度，无需手动设置宽度值：

body { margin: 0; padding: 0; box-sizing: border-box; }
.box { height: 100vh; /* block元素默认占满父容器宽度 */ }
.content1 { background-color: red; width: 100%; height: 100%; }
.content2 { background-color: aliceblue; width: 100%; height: 100%; }

或者用Flex强化布局逻辑：

body { margin: 0; padding: 0; box-sizing: border-box; display: flex; flex-direction: column; }
.box { flex: 0 0 100vh; width: 100%; }
.content1 { background-color: red; width: 100%; height: 100%; }
.content2 { background-color: aliceblue; width: 100%; height: 100%; }

问题截图 #

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