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.

Author:

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

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Notify me of followup comments via e-mail. You can also subscribe without commenting.