quick update: how to force vertical scrollbar with CSS

Still studying hard for exams over the next few weeks, but I took a quick lunch-break today and “relaxed” by doing a bit more web work. I came across the problem that some of my pages for a site were less than the height of the browser window, while others were longer. The result of this is that you get some “flickering” when navigating to different pages that don’t require a scrollbar as the layout shifts back and forth slightly if the browser doesn’t have a permanent scrollbar gutter..

The solution is to force a vertical scrollbar. This works well in all widely used browsers with only a few lines of code as the document height will always be at least one pixel longer. Just insert the following into your CSS:

html, body {
height: 100%;
margin: 0 0 1px;
padding: 0;
}

What the method above does is set your site’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 advantage of this is that this works no matter what the visitor’s resolution is; and you don’t need to manually set the page height.

Advertisements

About Cameron
I'm a final year Computer Science/Information Systems major. Already finished my BA in Politics/Philosophy. I do web and software freelance on the side, while I finish studying. Hoping to be self-employed by the end of my degree, otherwise off into the real-world I go....

One Response to quick update: how to force vertical scrollbar with CSS

  1. mamaglee says:

    Awesome, quick fix. Found it several places and tried it. Works great.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: