nicht angemeldet
Hallo mediaplay,
mittlerweile ist es in diesem Thread soweit, dass alle Beteiligten nur noch ihre Sichtweise durchsetzen wollen, ohne etwas zu erklären. Ich versuche mal, die Geschichte mit relativen Höhenangaben für height darzustellen:
Relative Breiten- und Höhenangaben richten sich in CSS (wie zu erwarten) nach dem Elternelement. Während bei der Breite die Voreinstellung/der Initialwert auto bewirkt, dass die Breite, padding und margin zusammen das Elternelement ausfüllen, gilt das für height nur, wenn die Höhe des Elternelementes entweder explizit festgelegt wurde, oder das formatierte Element das Root-Element des Dokumentes ist und height: 100% angegeben wird.
Zugegeben, das ist nicht unbedingt intuitiv und unterscheidet diese Angabe von den entsprechenden HTML-Attributen. Darüber bist Du gestolpert, wie viele andere auch irgendwann in ihrem Lernprozess (ich übrigens auch).
Der Internet Explorer macht deswegen, was Du sagst, weil Du etwas anderes zu sagen glaubst als das, was Du wirklich sagst.
Trotzdem hält sich Firefox (sowie die meisten anderen modernen Browsern) an die Spezifikation, nicht der Internet Explorer (der täte es auch, wenn Du ihn nicht in den sog. Quirksmode schicken würdest).
Das, was Du erreichen möchtest, geht mit CSS ebenfalls, aber nur wenn Du eine Höhe für das Root-Element festlegst.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<!-- head-Angaben -->
</head>
<body>
<div>Dieses <code>div</code> soll so hoch sein wie das Fenster.</div>
</body>
</html>
CSS:
html, body {
min-height: 100%; /* mindestens die Höhe des Elternelements (Browserfenster) */
}
* html, * html body {
height: 100%; /* Das selbe wie oben für IE6 (kann kein min-height, interpretiert height aber genau so. [1] */
}
div {
height: 100%; /* Soll so hoch sein, wie das Elternelement */
}
[1] Dies ist der sog. "star hack". Die Angabe ist korrektes CSS, aber wählt eigentlich kein Element ("alle html-Elemente, die in einem anderen Element vorkommen" bzw. "alle body-Elemente, die innerhalb eines html-Elements vorkommen, welches in einem anderen Element vorkommt."), der IE bis Version 6 wählt die Elemente aber, als ob am Anfang kein Stern notiert wäre.
schönen Gruß, _david
Kai345
Gunnar Bittersmann
Struppi
Der Martin