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

Question

Trying to create fullscreen frames using 100 vw and 100vh per div. I have 2 in this JSfiddle and, as you can see there is extra space both below and to the right of each frame.

Is there a way to use vw and vh and it fits perfectly without extra space?

css looks like this:

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

* Edit: It seems that creating a width of 100% solves this, but is this a solution? Is something tearing?

Answer 1

Scroll bars are included in vw and vh , so a scroll will be added so you can see outside the viewport.

to solve this problem you can use

max-width :100%