100vw 导致水平溢出，但只有一个以上？答案

【问题标题】：100vw causing horizontal overflow, but only if more than one?100vw 导致水平溢出，但只有一个以上？
【发布时间】：2014-06-15 13:11:07
【问题描述】：

假设你有这个：

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>

您不仅会获得垂直滚动条（预期），还会获得轻微的水平滚动。

我知道您可以省略宽度，或将其设置为 width: 100%，但我很好奇为什么会这样。 100vw 不应该是“视口宽度的 100%”吗？

【问题讨论】：

避免溢出隐藏在 html 和 body 如果你想在它的任何子元素上使用 position sticky 这不是一个好的解决方案...... max-width 似乎是一个好方法！！！

标签： css

【解决方案1】：

滚动条将包含在vw 中，因此将添加水平滚动条以允许您查看垂直滚动条下方。

当您只有 1 个盒子时，它是 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/

【讨论】：

这样做会导致内容出现在滚动条下方。 jsfiddle.net/NBzVV/1 要成为合适的解决方法，您需要添加正确的填充。
是的，很好看。将max-width:100% 添加到.box 将防止这种情况发生。
“所以会添加水平滚动，让你在垂直滚动下看到”
只是一个关于overflow 的注释，即使你将它添加到x，postition: sticky 的任何东西都不会起作用。

【解决方案2】：

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

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

Working Fiddle

【讨论】：

谢谢，这可以很好地解决问题，但我仍然认为这是一个有点不直观的默认行为。
关于不直观：根据 caniuse.com，这是一个浏览器错误。 caniuse.com/#feat=viewport-units --> 已知问题8：目前除了Firefox之外的所有浏览器都错误地认为100vw是整个页面宽度，包括垂直滚动条，溢出时会导致水平滚动条：设置了auto。
如果max-width: 100% 是没有滚动条的视口的宽度，那么你首先不需要100vw :-) 你可以只使用width: 100% 因为元素没有'没有任何定位的祖先，所以它的参考是身体。
这并不能解决任何问题！ max-width 仅有效，因为该元素是身体的直接后代！在任何实际使用 100vw 而不是 100% 的情况下（例如容器内的元素），这都行不通。
我不能使用 100% 的宽度，因为我的 div 位于我不知道宽度或填充的容器中。这就是使用 100vw 而不是 100% 的全部原因，所以这个答案毫无意义。如果您的设置是始终显示滚动条，即使没有滚动条，它也会在 Mac 上发生。

【解决方案3】：

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

原答案

这实际上是this answer 和上面的 cmets 中报告的错误。

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

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

【讨论】：

嗯，接受的答案有变化吗？您提出的建议与接受的答案相同。这就是为什么答案应该自己完成。
接受的答案建议添加max-width: 100%。我建议将width: 100vw 更改为width: 100%。我将答案更新为独立的。
除了Chrome之外还有其他浏览器，有些浏览器对滚动条的处理方式不同。

【解决方案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 是一个后备值。

【讨论】：

喜欢这个。相当优雅
这是完美的，因为它可以在全球范围内使用。谢谢。
这是一个很棒的技术，谢谢分享！一个问题是该脚本需要在加载 dom 后运行以进行初始大小调整，因此要么将其放在页脚中，要么添加一个 DOMContentLoaded 事件。
技术好！为了简化 CSS，您可以在样式表中添加以下代码： html{ --vw:1vw };这允许您使用 var(--vw) 而没有后备，因为在 CSS 中定义的 --vw 的值将被 JS 覆盖。如果 JS 失败，CSS 中定义的值作为后备。
@Ben 感谢您的关注。更新

【解决方案5】：

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

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

【讨论】：

太棒了，其他解决方案并没有为我解决问题，但它做到了。（将宽度更改为 100% 确实会减小对象的宽度，因为它们不再被拉伸到视图的完整宽度）。
这会有其他副作用，比如完全破坏position: sticky。

【解决方案6】：

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

【讨论】：

隐藏问题并不能解决问题。虽然您的方法确实消除了溢出，但它只是隐藏了它。当内容应该显示在外面时（无论出于何种原因），这可能会导致问题
嘿用户13149444！纯代码答案可能会解决问题，但如果您解释它们如何解决问题，它们会更有用。社区需要理论和代码才能完全理解您的答案。

【解决方案7】：

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

html {
   max-width: 100%;
}

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

【讨论】：