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

Question

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?

Granddad

as you can see ... I don't see it in Chrome. – Diversity

@Diversity I updated the link. Does that help? The background was white before so maybe you didn't see. see how there's a scroll bar on the bottom? That means there's extra space to the right. – Granddad

Also not seeing the problem in Chrome. I suspect the addition of this code fixed it for you: * { margin: 0; padding: 0; } – Samsara

@BryanDowning No that didn't fix it. It was there from the start. In the JSfiddle it's like that for me in what is likely the latest version of chrome. You're saying the result square doesn't have a scroll-bar at the bottom? If that's true then this is strange. On my end setting width to 100% fixed it, but I'm not sure if it's an appropriate fix. Does it break any rules? Is there something I should be aware of with regards to either using 100% or 100vh/vw? – Granddad

If you make each of your divs only 50vh high, instead of a 100vh, the problem disappears – because the scrollbar disappears as well. dev.w3.org/csswg/css-values/#viewport-relative-lengths says, “However, when the value of ‘overflow’ on the root element is ‘auto’, any scroll bars are assumed not to exist. Note that the initial containing block’s size is affected by the presence of scrollbars on the viewport.” – but I don’t know how to unify those two statements, as they seem to contradict each other to me … – Bernicebernie

@CBroe Thanks for the info. I thought this would've been well tread ground in the world of CSS by now with a clear solution. – Granddad

@CBroe It appears that what was written above solves the issue. Adding overflow: auto causes the scrollbars not to factor into the calculation of the container's size, thus solving the problem. Thanks again. – Granddad

Answer 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%

Eldreda

Answer 2

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

Gonyea

This is the cause of similar problems but not this one. – Pastoralize