Backgrounds as tall as the window or content, whichever is taller

This page works identically in Safari 1.2, NS6, FF0.8, and IE6. It makes IE5Mac cry.

#content is set to height:100% to take the white background to the bottom of the window even when there's little content. #content2 is a wrapper inside #content which continues the background color when the content flows outside the height of #content.

Click this content to double it, and see that this page works as the content gets tall and overflows.

The "proper" solution would be to use min-height:100% rather than height:100%, but not enough browsers support that CSS property.


(If your browser supports min-height, the above paragraph should be taller than one line.)