使用100vw和vh会创建超出视口大小的额外空间.我如何摆脱它? [英] Using 100vw and vh creates extra space beyond viewport size. How do I get rid of it?

问题描述

尝试在div上使用100 vw和100vh制作全屏框架.我在此JSfiddle 中有2个，并且您可以看到底部和底部都有额外的空间.每帧的右侧.

Trying to make full screen frames using 100 vw and 100vh on divs. I have 2 in this JSfiddle and as you can see there's extra space both on the bottom and on the right of each frame.

有没有一种方法可以使用vw和vh并使其完美契合而无需额外的空间?

Is there a way of using vw and vh and having it fit perfectly without the extra space?

css看起来像这样:

The css looks like this:

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

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

* Edit:似乎使宽度为100％可以解决此问题，但是此解决方案合适吗?它会破坏任何东西吗?

* It seems that making the width 100% solves this, but is this solution appropriate? Does it break anything?

推荐答案

vw和vh中包含滚动条，因此将添加滚动条以使您可以在视口之外查看.

Scrollbars are included in the vw and vh so the scroll will be added to allow you to see beyond viewport.

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

to solve this problem you can use

max-width :100%

这篇关于使用100vw和vh会创建超出视口大小的额外空间.我如何摆脱它?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！