Forcing a Vertical Scrollbar

Avoid the contents of a centered page shifting when navigating to different pages that don't always have a scrollbar in Firefox and other browsers without a scrollbar gutter.

Force a Vertical Scrollbar

When you've got a website with centered content, an annoying thing happens when changing pages: if the content is shorter than the browser height on one page, and extends past it on another, the layout shifts back and forth slightly if the browser doesn't have a permanent scrollbar gutter.

So how do we fix it?

Luckily, the solution is easy, and works well in all widely used browsers with only a few lines of code, the document height will always be at least one pixel longer.

  1. html, body {
  2.   height: 100%;
  3.   margin: 0 0 1px;
  4.   padding: 0;
  5. }

What the prescribed method above does is set a website's height to 100 percent with a bottom margin of 1 pixel to force the vertical scrollbars to appear with at least one pixel to scroll. The main advantage here as opposed to other fixes, such as setting a website's height to, say 750 pixels, is that this works no matter what the visitor's resolution is. Also, it's obvious to a user that there is no more content to scroll being that the scrollbars have only a single pixel to scroll.


Web Design Resources and Articles