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

问题描述

说你有这个:

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

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

您将获得填满整个屏幕的内容，没有滚动条.但添加另一个:

You'll get something that fills the screen, no scrollbars. But add another:

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

不仅获得了垂直滚动条(预期的)，还获得了轻微的水平滚动条.

You get not only vertical scrollbars (expected), but a slight horizontal scroll.

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

I realize you could omit the width, or set it to width: 100%, but I'm curious why this is happening. Isn't 100vw supposed to be "100% of the viewport width"?

推荐答案

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

As already explained by wf4, the horizontal scroll is present because of the vertical scroll. which you can solve by giving max-width: 100%.

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

工作小提琴

Working Fiddle

这篇关于100vw引起水平溢出，但仅当一个以上时?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！