Using 100vw and vh creates extra space beyond viewport size. How do I get rid of it?

问题

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.

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

The css looks like this:

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

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

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

回答1:

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%

来源：https://stackoverflow.com/questions/25320289/using-100vw-and-vh-creates-extra-space-beyond-viewport-size-how-do-i-get-rid-of