• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
The Electric Toolbox Blog

The Electric Toolbox Blog

Linux, Apache, Nginx, MySQL, Javascript and PHP articles

  • Applications
  • FCKEditor
  • Apache
  • Windows
  • Contact Us
Home / Always show a vertical scrollbar in Firefox, Chrome, Safari and Opera

Always show a vertical scrollbar in Firefox, Chrome, Safari and Opera

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.

firefox with no scrollbars when not required

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.

firefox with scrollbars when required

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.

firefox always showing vertical scrollbars

Check Out These Related posts:

  1. Opening a new window with Javascript
  2. HTML/CSS background-position
  3. Using ellipsis with HTML and CSS
  4. Style HTML form elements optgroup and option with CSS in Opera

Filed Under: HTML And CSS

Primary Sidebar

Categories

  • Apache
  • Applications
  • Article
  • Case Studies
  • Email Servers
  • FCKEditor
  • HTML And CSS
  • Javascript
  • Linux/Unix/BSD
  • Microsoft SQL Server
  • Miscellaneous Postings
  • MySql
  • Networking
  • Nginx Web Server
  • Offsite Articles
  • OSX
  • PHP
  • Quick Tips
  • RFC – Request for Comments
  • SilverStripe
  • VMWare
  • VPN
  • Windows
  • WordPress

Recent Posts

  • Vim Show Line Numbers
  • Add User To Group Linux
  • Chmod 777 Tutorial
  • How to Copy Directory Linux
  • Linux create user

Copyright © 2021. ElectricToolBox. All Rights Reserved.

  • Contact Us
  • Copyright Info
  • Privacy Policy
  • Sitemap