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.
- html, body {
- height: 100%;
- margin: 0 0 1px;
- padding: 0;
- }
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.
