CODEWITHSUNDEEP
htmlcssviewport-units
ReotheNew
ReotheNew

Reputation: 127

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

Trying to make full screen frames using 100vw 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?

Upvotes: 13

Views: 11597

Answers (2)

sattam bandyopadhyay
sattam bandyopadhyay

Reputation: 15

This is happening because the body element itself has some margin. You apply margin: 0; in body element, this will work.

Upvotes: -1

Madan Bhandari
Madan Bhandari

Reputation: 2184

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%

Upvotes: 8

Related Questions