HTML/CSS height: 100%

Sometimes I wonder why browser developers are still alive just by estimating the number of web developers fighting with their software. Regarding me, I am eating tons of sweets here to calm down, preventing to beat up the next browser developer crossing my way.

My last nervous breakdown was fiddling with an element to fill the screen by having height set to 100%. The simple idea crossing my mind was just adjusting the CSS Class to do it:

#container {
        margin:0 auto;
        background:#ffffff;
        border:solid 1px #FFF;
        width:830px;
	height: 100%;
}

But that damn object wasn’t impressed by that statement at all. So I checked out the whole thing and found the error as I suspected my #container to be the parent element even if it’s the first one after the opening body tag..

You might shake your head now, but if you’re writing valid (x)html, your site usually starts with the html-tag followed by the body which are just stretched ‘as needed’

If we keep that logic in mind, we can modify our stylesheet:

html,body {
        background-color:#bacaff;
        margin: 0;
	height:100%; /* That's the key! */
}

#container {
        margin:0 auto;
        background:#ffffff;
        border:solid 1px #FFF;
        width:830px;

 	min-height: 100%;		/* Min height for modern Browser */
	height: auto !important;	/* !important-Rule for modern Browser */
	height: 100%;			/* Min heigh for IE (<7) */
}

And then things work.