css – 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>

您不仅可以获得垂直滚动条(预期)，还可以轻微的水平滚动。

我意识到您可以省略宽度，或将其设置为宽度：100％，但我很好奇为什么会发生这种情况。不是100vw应该是“100％的视口宽度”？

解决方法

如wf4已经说明的那样，由于垂直滚动，水平滚动是存在的。您可以通过给出最大宽度：100％来解决。

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

Working Fiddle

原文地址：https://www.jb51.cc/css/219572.html