Always show a vertical scrollbar in Firefox, Chrome, Safari and Opera
Posted June 20th, 2009 in HTML and CSS
Firefox, Chrome, Safari and Opera by default only show vertical scrollbars if the content on the page is longer than the window whereas Internet Explorer always shows vertical scrollbars. When moving from page to page where one is short and the next long it can make the layout jump around a bit so this post shows how to fix this for the other browsers.
The Solution
To save you having to scroll down and search for the answer I'll present it here first and then show some examples of what I'm talking about. This works in Firefox versions 1.5+ and for the current versions of the other browsers (I haven't tested the others in older versions).
html {
overflow-y: scroll;
}
Examples
This first screenshot shows a short page which doesn't require vertical scrollbars because the content doesn't go beyond the end of the window.

Now the content does go beyond the end of the the page so there is a vertical scrollbar. The flow of the text of the first paragraph is not the same as in the previous example because previously there wasn't one and now there is.

The final example has "html { overflow-y: scroll; }" set so the vertical scrollbar is always present. You can see this in the screenshot below where there is a scrollbar present but it's un-selectable.

Related posts:
- Disable textarea resizing for Safari and Chrome (Saturday, July 4th 2009)
- How to do a strikethrough with CSS (Saturday, June 13th 2009)
- Using CSS letter-spacing to space out titles (Saturday, April 18th 2009)
- Blockquotes and XHTML Strict (Saturday, April 11th 2009)
- Multiple CSS classes for a single element (Saturday, March 21st 2009)
- Force reload of updated CSS and Javascript files with unique filenames (Friday, March 20th 2009)
Share or Bookmark
Share or Bookmark this page using the following services. You will need to have an account with the selected service in order to post links or bookmark this page.
Subscribe or Follow
Subscribe via RSS or email, or follow me on Facebook or Twitter below. The RSS icon takes you through to Feedburner where you can select the service or application to use.
