Forcing Vertical Scroll-Bars Using CSS

LemonTree Studios represents a new direction in design and marketing for a small team of talented individuals with years of experience in the web development, graphic design, advertising, media, marketing, and IT fields. Our growing list of satisfied clients is an accolade of our exacting approach to service and our exceptional communication skills.

Written on July 20, 2010 at 1:11 pm, by lemontree

Some browsers, like Firefox, lack a permanent scrollbar gutter. This causes a slight jitter when viewers move from a page with minimal content that does not require a vertical scroll bar to a page that does. This annoying jitter is easily fixed however, by forcing a vertical scrollbar even on pages where one is not required.

Force a Vertical Scrollbar

Luckily, the solution is very easy, using only a couple of lines of CSS code.

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

The above method sets the website’s height to 100 percent, and the adds a bottom margin of 1 pixel. This extra pixel forces the vertical scrollbars to appear. Other methods involve setting the height or min-height of a website to a greater value than the screen height, but our method is guaranteed to work regardless of the viewers screen resolution, without adding excessive scroll height.

Like this post? Share it with friends!

Comments Off Categories Web Design Tips and Tricks | Tags:
You can follow any comments to this entry through the RSS 2.0 feed.

Comments are closed.

Contact Us

LemonTree Studios can be contacted via info_at_lemontreestudios.ca?subject=Website Inquiry this email link, the inquiry form that appears below, or by any of the methods listed on this panel. We encourage inquiries of all types, but respectfully request that no spam or mass marketing emails be sent so that we may focus on responding to clients in a prompt manner.

Inquiries

Social Stuff

Services

LemonTree Studios offers a wide range of services including Web Design and Development, Graphic Design for both web and print, Logo, Business Card and Stationery design, Product and Portrait Photography, Web Hosting and related services, Computer Repairs including virus and spyware removal, Resume Design, and Document Templates (ie. Microsoft Office).