100vw导致水平溢出,但只有多于一个？

Question

说你有这个:

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%的视口宽度"？

Answer 1

正如wf4已经解释的那样,由于垂直滚动,存在水平滚动.你可以通过给予解决max-width: 100%.

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

工作小提琴

Answer 2

滚动条将包含在内,vw因此将添加水平滚动以允许您在垂直滚动下查看.

当你只有一个盒子时,它是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/

Answer 3

我遇到了类似的问题，并使用 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 是后备值。