thumbnail image for this experiment

forcing scrollbars - pixel pushing


Jon Hicks was recently discussing possible solutions to a little problem:

The massive trend of centering content horizontally brings with it a small problem. When moving from pages with short to long content, a nasty shift happens in Opera, Mozilla and Safari as the window makes room for the scrollbars. The only way to avoid this is to force scrollbars to appear all the time.

my initial thought was pretty straightforward: html { height: 101%; }

all good and well, but that 1% can quickly become large enough to be annoying. for example, on 1024x768 resolution, even assuming the (maximised) browser chrome itself takes up 200 pixels, the above code would result in an empty "phantom" area of 568 x 1% = 5.68 pixels.

anything below a full pixel seems to be ignored by Opera, so 100.1% was quickly thrown out.

after a break and a coffee, a slicker potential solution that seems to do the trick: html { height: 100%; margin-bottom: 1px; }

a single pixel of scrolling, i can live with that. yes, it's a hack, but a "friendly" one that does not rely on bugs in a browser's parsing/rendering of CSS. works fine in anything but IE5/Mac, apparently.

update: Anne pointed out that the above solution has problems when content overflows the root element (i.e. when there's enough content on a page so that scrollbars would naturally appear anyway) if the latter has a (background or) border applied to it. the definitive solution:html { min-height: 100%; margin-bottom: 1px; }