html - 使用 100vw 和 vh 会创建超出视口(viewport)大小的额外空间。我该如何摆脱它？

Question

尝试在 div 上使用 100 vw 和 100vh 制作全屏帧。我有 2 个 this JSfiddle正如您所看到的，每个框架的底部和右侧都有额外的空间。

有没有一种方法可以使用 vw 和 vh 并在没有额外空间的情况下使其完美契合？

CSS 看起来像这样:

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

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

*编辑:似乎将宽度设置为 100% 可以解决这个问题，但是这个解决方案合适吗？它会破坏任何东西吗？

Answer 1

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

解决这个问题你可以使用

最大宽度:100%