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

8dtrkrch 于 2023-05-19 发布在其他

关注(0)|答案(2)|浏览(249)

尝试在div上使用100vw和100vh制作全屏帧。我有2在this JSfiddle和你可以看到有额外的空间都在底部和右侧的每一帧。
有没有一种方法可以使用vw和vh，并且在没有额外空间的情况下完全适合它？
CSS看起来像这样：

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

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

2条答案

滚动条包含在vw和vh中，因此将添加滚动条以允许您查看视口之外的内容。
要解决这个问题，您可以使用
max-width :100%

这是因为body元素本身有一些余量。您应用保证金：0;在body元素中，这将起作用。