100vw引起水平溢出，但仅当一个以上时？

说你有这个：

html, body {margin: 0; padding: 0}
.box {width: 100vw; height: 100vh}

<div class="box">Screen 1</div>

您会得到充满整个屏幕的内容，没有滚动条。但添加另一个：

<div class="box">Screen 1</div>
<div class="box">Screen 2</div>

您不仅会获得垂直滚动条（预期的），而且还会获得轻微的水平滚动条。

我知道您可以忽略宽度，或将其设置为width：100％，但是我很好奇为什么会这样。是不是100vw应该是“视口宽度的100％”？

如wf4所解释的，由于垂直滚动而存在水平滚动。您可以通过给出解决max-width: 100%。

.box {
    width: 100vw;
    height: 100vh;
    max-width:100%;  /* added */
}

工作小提琴

滚动条将包含在中，vw因此将添加水平滚动条，以允许您在垂直滚动条下查看。

当您只有1个盒子时，它的宽度为100％x高度为100％。添加2后，其100％宽x 200％高，因此触发了垂直滚动条。当垂直滚动条被触发时，它随后触发水平滚动条。

您可以添加overflow-x:hidden到body

html, body {margin: 0; padding: 0; overflow-x:hidden;}
.box {width: 100vw; height: 100vh; background-color:#ff0000}
.box2 {width: 100vw; height: 100vh; background-color:#ffff00}

http://jsfiddle.net/NBzVV/

我遇到了类似的问题，并提出了以下使用JS和CSS变量的解决方案。

JS：

function setVw() {
  let vw = document.documentElement.clientWidth / 100;
  document.documentElement.style.setProperty('--vw', `${vw}px`);
}

setVw();
window.addEventListener('resize', setVw);

CSS：

width: calc((var(--vw, 1vw) * 100);

1vw是后备值。

更新：从Chrome版本66开始，我不再能够重现问题所报告的行为。似乎不需要任何解决方法。

原始答案

这实际上是此答案和以上注释中报告的错误。

尽管.box {max-width: 100%;}通常可以接受的答案（添加）中的解决方法起作用，但我注意到它目前不起作用display:table（在Chrome中测试），这一点值得注意。在这种情况下，我发现的唯一解决方法是width:100%改用。

• 破碎的小提琴与display:table
• 工作小提琴与display:table和width:100%

为了摆脱大众汽车中包括的滚动条宽度，我必须这样做：

html, body {
    overflow-x: hidden;
    height: 100vh;
}

*,
html,
body {
  margin: 0;
  padding: 0;
  overflow: hidden;/*add This*/ 
}
/*and enjoy ^_^ */