Issue with 100vw including scrollbar width

Question

I have a div that needs to be full screen width inside a parent div that has a limited with. Simplified, it's something like:

HTML:

<div class="container">
  <div class="banner">
  </div>
</div>

CSS:

.container {
  width: 1170px;
  margin: auto;
}
.banner {
  width: 100vw;
  margin-left: calc( 50% - 50vw);
}

which works fine, except for one thing: The scrollbar on the page covers some of the content in the child div, because 100vw appearantly includes the scrollbar width. So is there a way around this so I can set the width to (100vw - scrollbar width), or perhaps a completely different way to achieve what I want to do with pure CSS?

Answer 1

You could set the scrollbar width and subtract it from the container's width using 'pure CSS'.

You could give width to the scroll bar in webkit-browsers using:

body::-webkit-scrollbar {
 width: scrollbarwidthpx;
}

and set the content width as:

width: calc(100vw - scrollbarwidthpx);

You could make use of this article regarding customizing scrollbar

Answer 2

Try to use % where you can. vw is a percent of the viewport width including the scrollbar while % is a percent of the wrapper object which does not get confused by the scrollbar.

In general:

• Don't use a fixed width (px) container. It's bad practice and will not render well on mobile screens. See Responsive Web Design for more.
• Don't use vw for containers (or banners). It has weird effects on the scrollbar.