css – 100vw造成水平溢出,但只有一个以上?

前端之家收集整理的这篇文章主要介绍了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

猜你在找的CSS相关文章