Ignore scroll bar width when using width=80% and <meta name=viewport width=device-width…>

0 votes
asked Feb 16, 2016 by dandorid

When I use <meta name=viewport width=device-width...> and set the width of a <div> element to 80% using CSS (margin: auto; width: 80%) the content displays centered on my page.
If the content is higher than the viewport, a scroll bar is displayed by the browser (as intended). The scroll bar, however has a width that is taken from the device-width, so a tall page renders (slightly) different than a small one due to a reduced width. This causes the DIV's borders to move in and out.

Is there a way to prevent this, that is: tell the browser to ignore the width of the scroll bar when calculating the 80% width of my DIV?

1 Answer

0 votes
answered Feb 16, 2016 by chris-simmons

There are several options you could try but the scroll bar can be a never ending battle depending on the situation (at least from my experience).

First in chrome you can add the css rule

::-webkit-scrollbar { 
      display: none; 
} 

But that only works in chrome, and it's not a great idea to hide the scrollbar from the user as its intention is to let everyone know that more content lies below.

Second you could add padding of around 20-40 pixels on the right side based on the screen size using media rules to detect screen size, the padding should register under the scrollbar preventing the resize.

Third you could write javascript to detect the scrollbar width and add margin or padding accordingly, but that is probably not needed in this situation.

Welcome to Q&A, where you can ask questions and receive answers from other members of the community.
Website Online Counter

...