CSS 100vw 导致水平溢出，但前提是不止一个？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23367345/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
100vw causing horizontal overflow, but only if more than one?
提问by rdoyle720
Say you have this:
说你有这个：
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.
您不仅会获得垂直滚动条（预期），还会获得轻微的水平滚动条。
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"?
我意识到您可以省略宽度，或将其设置为宽度：100%，但我很好奇为什么会发生这种情况。100vw 不应该是“视口宽度的 100%”吗？
回答by Mr_Green
As already explained by wf4, the horizontal scroll is present because of the vertical scroll. which you can solve by giving max-width: 100%.
正如 wf4 已经解释的那样，由于垂直滚动而存在水平滚动。你可以通过给max-width: 100%.
.box {
width: 100vw;
height: 100vh;
max-width:100%; /* added */
}
回答by wf4
scrollbars will be included in the vwso the horizontal scroll will be added to allow you to see under the vertical scroll.
滚动条将包含在 中，vw因此将添加水平滚动以允许您在垂直滚动下查看。
When you only have 1 box, it is 100% wide x 100% tall. Once you add 2, its 100% wide x 200% tall, therefore triggering the vertical scrollbar. As the vertical scrollbar is triggered, that then triggers the horizontal scrollbar.
当您只有 1 个盒子时，它是 100% 宽 x 100% 高。添加 2 后，其 100% 宽 x 200% 高，因此会触发垂直滚动条。随着垂直滚动条被触发，然后触发水平滚动条。
You could add overflow-x:hiddento body
你可以添加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}
回答by Stepan Shatkovski
I had a similar problem and came up with the following solution using JS and CSS variables.
我遇到了类似的问题，并使用 JS 和 CSS 变量提出了以下解决方案。
JS:
JS：
function setVw() {
let vw = document.documentElement.clientWidth / 100;
document.documentElement.style.setProperty('--vw', `${vw}px`);
}
setVw();
window.addEventListener('resize', setVw);
CSS:
CSS：
width: calc((var(--vw, 1vw) * 100);
1vw is a fallback value.
1vw 是后备值。
回答by Cornflex
Update: As of Chrome version 66, I cannot reproduce the behaviour reported by question anymore. No workaround appears to be needed.
更新：从 Chrome 66 版开始，我无法再重现问题报告的行为。似乎不需要解决方法。
Original Answer
原答案
This is actually a bug as reported in this answerand the comments above.
这实际上是这个答案和上面的评论中报告的一个错误。
While the workaround in the accepted answer (adding .box {max-width: 100%;}) generally works, I find it noteworthy that it does not currently work for display:table(tested in Chrome). In that case, the only workaround I found is to use width:100%instead.
虽然接受的答案（添加.box {max-width: 100%;}）中的解决方法通常有效，但我发现值得注意的是它目前不适用于display:table（在 Chrome 中测试）。在这种情况下，我找到的唯一解决方法是width:100%改用。
- Broken Fiddlewith
display:table - Working Fiddlewith
display:tableandwidth:100%
回答by manuel-84
to get rid of the scrollbar width included in vw i had to do this:
要摆脱 vw 中包含的滚动条宽度，我必须这样做：
html, body {
overflow-x: hidden;
height: 100vh;
}
回答by user13149444
*,
html,
body {
margin: 0;
padding: 0;
overflow: hidden;/*add This*/
}
/*and enjoy ^_^ */
