Width: 100% VS. width: 100vw

Recently, I’ve noticed that using 100vw adds extra space to the right of the viewport and additionally a scrollbar to visit that extra space. It doesn’t happen with 100% so that’s what I’m currently using.

Why does this happen? I’d like to know what the under the hood implementations of the vw and vh tags are and if they really are better for responsive design.

Comments

[Michael O]

This happens because 100% will make the element fit into it's contained or available space.

100vw will attempt to fit the available screen including the document margin, and so you'll need to remove the body margin:

body { margin: 0; }

100vh will behave the same way.

Problem solved.

[Edgar A Negron]

Interesting. Very simple solution. Thanks. In that case, is 100vw a better responsive solution than %?

[Michael O]

I don't think there is a right or wrong answer to that question. I've always used 100% without any dramas, but I'd imagine that if I changed all instances of 100% to 100vw it would be fine.

[Manda Putra]

If i dont specify my body to 100vh and 100vw why some width: 100%; and height: 100%; wont work?

Is there a way to make my body always 100% height and 100% width?

[Austin S. Hemmelgarn]

You've probably got padding or margins on the element involved (or it's parents), and those have to be rendered as well, so they cause spill-over off the side of the viewport.

The only other implementation detail likely to cause you any grief with these is that they shouldn't include the width/height of any scrollbar. This means that:

• Without overlay scrollbars, the exact value may change without the user changing the size of the viewport, because any layout change that causes the page to switch between needing and not needing a scrollbar will change the size of the viewport. This is especially important if you end up with reflows as a result of the size of elements changing, as it can cause the page to 'bounce' between displaying and not displaying a scrollbar. Many browsers other than Firefox ignore this part of the specification on desktop platforms for the vw unit to avoid the possibility of that bouncing behavior.
• With overlay scrollbars, you might end up with some content hidden below the scrollbar when the user is hovering over the scrollbar.

As a general rule, I'd recommend against using either percentages or viewport units when you can avoid it for responsive design. You're much more likely to get consistent results by using REM's for sizing everything and changing sizes based on media queries (for example, like Bootstrap does for it's various responsive elements).