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应该是＆＃34; 100％的视口宽度＆＃34;？

Answer 1

正如wf4已经解释的那样，由于垂直滚动，存在水平滚动。您可以通过提供max-width: 100%来解决这个问题。

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

<强> Working Fiddle

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

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

原始答案

这实际上是this answer及上述评论中报告的错误。

虽然接受的答案（添加.box {max-width: 100%;}）中的解决方法通常有效，但我发现值得注意的是，它目前不适用于display:table（在Chrome中测试过）。在这种情况下，我发现的唯一解决方法是使用width:100%代替。

Broken Fiddle与display:table
Working Fiddle与display:table和width:100%

Answer 4

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

Answer 5

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

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

Answer 6

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

Answer 7

如果您在一个框架（例如 ASP.NET）中工作，其中可能有一个父元素环绕 html，那么将 html 的 max-width 设置为 100% 将解决问题，而无需使用“band -aid”解决方案 overflow-x: hidden。

html {
   max-width: 100%;
}

100vw 导致水平滚动条的原因在其他回复中有很好的解释：100vw 计算垂直滚动条到 html 本身的宽度。我认为这有点荒谬，但事实就是如此，你知道:)

Answer 8

放入width: 98vw;

和margin-left: 1vw;

来补偿它，所以无论您是否滚动，元素都恰好在中间而无需重新计算。

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

8 个答案:

原始答案