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.

Author:

8 thoughts on “HTML/CSS height: 100%”

  • numerodix says:

    I can’t believe you cracked it! I didn’t think it was possible to actually do this, I’ve tried so many times.

  • I was tearing out my hair on cracking that one. The common mistake is just expanding the body and leaving out the html main tag – which is close but no cigar. For remembering it now, I just took some notes here for making google pointing me at my own notes when searching for it again :)

  • Buddy, could you please post such topics a little earlier? I would have needed that hint a couple of days ago…
    But in general – great work, great explanation!

Leave a Reply

Your email address will not be published. Required fields are marked *