Edinburgh Web Development

Forcing vertical scrollbar

by Iain Wilson

14 December 2009

We quite often want to force a browser vertical scrollbar on a page when we have pages that are shorter than the height of the screen.

Why? because we don't want page elements 'jumping' horizontally when a visitor transitions from a page without a vertical scroll to one that has (or vice-versa).

We always used to use CSS:

html {min-height:100%; margin-bottom:1px}

to force the vertical scroll, but with latest versions of Firefox and IE this has stopped working. So now we are using:

html {min-height:100.2%;}

Not particularly elegant, but it works. When CSS3 becomes gets widespread, we'll probably change to: 

html {overflow-y: scroll;}

Liked this article? Please share it with your friends and colleagues.

comments powered by Disqus
Blot Design,
10 Colinton Road, Edinburgh, EH10 5DT
Terms, Cookies & Privacy