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

Question

尝试在div上使用100 vw和100vh制作全屏帧。我在this 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%

Answer 2

之所以发生这种情况，是因为body元素本身具有一定的余量。 您应用保证金：0；在body元素中，这将起作用。