使用100vw和vh会创建超出视口大小的额外空间.我怎么摆脱它？

Question

尝试在div上使用100 vw和100vh制作全屏帧.我在这个JSfiddle中有2个,你可以看到每个帧的底部和右边都有额外的空间.

有没有一种方法可以使用vw和vh并且在没有额外空间的情况下完美地适应它？

css看起来像这样:

.f1 {
width: 100vw;
height: 100vh;
background-color: blue;
}

.f2 {
width: 100vw;
height: 100vh;
background-color: grey;
}

*编辑:似乎宽度100%解决了这个问题,但这个解决方案是否合适？它会破坏什么吗？

Answer 1

滚动条包含在 中vw，vh因此将添加滚动条以允许您查看视口之外的内容。

要解决此问题，您可以使用

max-width :100%