How to Make the Browser Scrollbar always appear (using CSS)

You may have noticed that in some browsers (e.g. Mozilla Firefox), the vertical scrollbar disappears altogether when it is not required, i.e. when the page content is less than the height of the browser window (viewport). This means that some content may jump horizontally when switching between pages. For example, if you have a centered header in your page template, the "center" of the page moves slightly when the scrollbar appears, which in turn moves the header.

There is a very simple CSS fix to make the scrollbar appear as it does in Internet Explorer, i.e. the scrollbar becomes inactive when it's not required but it is always visible.

Add this code to your CSS stylesheet:

html {overflow-y: scroll;}

That's all there is to it!