html - 使用 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%

Answer 2

发生这种情况是因为 body 元素本身有一些边距。您申请保证金：0；在 body 元素中，这将起作用。