HTML/CSS height: 100%

Manchmal frage ich mich echt, was sich Programmierer von Webseiten den ganzen Tag an Beruhigungstabletten einwerfen, um nicht die Hersteller von Browsern anzufallen und hemmungslos zu verprügeln. Jedenfalls hänge ich hier schon wieder an der großen Schokoladentafel während ich diverseste Webseiten nach kleinen Workarounds für diverseste ‚geht nicht‘-Situationen zu finden.

Mein letzter Aufschrei der Verzweiflung galt der Angabe der Höhe eines Elements, welche eben mal schnell 100% betragen sollte. Man denkt, ein Eintrag in der entsprechenden CSS Klasse sollte das Problem beheben:

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

Doch das verflixte Element rührt sich keinen Meter. Warum das so ist, sollte sich erklären lassen, dass sich prozentuelle Angaben immer auf das übergeordnete Objekt beziehen. Und nun kommt der Denkfehler: Wenn die Seite einen primitiven Code hat und eben mein #container eigentlich schon das oberste Objekt ist, dann sollte doch eigentlich nichts mehr als übergeordnetes Objekt gelten?

Diese Annahme stellt sich ziemlich schnell als falsch heraus, wenn man valides (x)html schreibt, da dort noch zwei übergeordnete Objekte existieren, welche es auszudehnen gilt: Das Body-Tag und das alles umschließende HTML-Tag.

Eigentlich logisch, wenn man das mit der Struktur beachtet – aber ein gern gemachter Fehler dies zu übersehen. Damit unser frommer Wunsch von vorhin funktioniert muss das Stylesheet entsprechend erweitert werden:

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) */
}

Und dann funktioniert es auch.

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

numerodix says:

23.02.2009 at 13:57

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

Stargazer says:

23.02.2009 at 14:26

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 :)

Toei Rei says:

23.02.2009 at 16:49

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!