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?

possible duplicate https://stackoverflow.com/questions/51655759/vertical-scrollbar-appears-when-width-is-larger-than-100vw/51656038#51656038 — Temani Afif, Oct 12 '18 at 10:09
can you describe what you want to achieve? you want to make the banner overflowing ? — Temani Afif, Oct 12 '18 at 10:11
@Temani Afif – Yes, I want the banner to overflow, making it full screen width. — ReddaJoppe, Oct 12 '18 at 11:08
@paddyfields – because it's inside a limited width container. 100% width just makes it same width as its parent. — ReddaJoppe, Oct 12 '18 at 11:10
@Paulie_D – overflow-x:hidden on body doesn't seem to do anything. — ReddaJoppe, Oct 12 '18 at 11:11

Vishnu · Answer 1 · 2022-10-14T13:39:27.183

2

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

edited Oct 14 '22 at 13:39

answered Oct 12 '18 at 10:45

Vishnu

1,611
1
14
27

score 1 · Answer 2 · answered May 13 '19 at 05:26

Try to use % where you can. vw is a percent of the viewport width including the scrollbar and % is a percent of the wrapper object, where the body is not rendered inside the scrollbar.

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.

Finally, I don't understand why you want something to be at 300vw or 3x the width of the viewport, but sure. If you designed your page right with responsive web design and avoided setting any wrapper's dimensions with px, then it shouldn't be hard to know what that width of the containing div is. For example, if the wrapper (containing div) is at 30% of the viewport and you want your banner to be 300% of the viewport, then you want 1000% for your banner to span the width of three screens.

Issue with 100vw including scrollbar width

2 Answers2