100vw 引起水平溢出，但仅限于一个以上？

假设你有这个:

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%”吗？

126217 次浏览
小开

滚动条将包含在 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/

小开
最佳答案

正如 wf4所解释的，水平滚动是因为垂直滚动而存在的。你可以通过给出 max-width: 100%来解决这个问题。

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

工作小提琴

小开

更新: 从 Chrome 66版本开始，我不能再复制问题报告的行为了。似乎不需要变通方法。

原始答案

这实际上是 这个答案和上面的注释中报告的一个 bug。

虽然在接受的答案(添加 .box {max-width: 100%;})的变通方法通常工作，我发现值得注意的是，它目前不工作的 display:table(在 Chrome 测试)。在这种情况下，我找到的唯一解决办法是使用 width:100%。

小开

我也遇到过类似的问题，并使用 JS 和 CSS 变量提出了下面的解决方案。

约翰逊:

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 是一个备用值。

小开

为了去掉包含在 vw 中的滚动条宽度，我必须这样做:

html, body {
overflow-x: hidden;
height: 100vh;
}
小开 
*,
html,
body {
margin: 0;
padding: 0;
overflow: hidden;/*add This*/
}
/*and enjoy ^_^ */
小开

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

html {
max-width: 100%;
}

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

小开

你可以试试:

*{ box-sizing: border-box}

内容流出屏幕的原因可能是你在 div 上有额外的填充或边框，这会导致内容流出浏览器


提交答案