DEV Community

Discussion on: Width: 100% VS. width: 100vw

Collapse
 
ahferroin7 profile image
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).