height
Die W3C-Spezifikation für CSS 2 legt fest, dass sich Höhenangaben, die in Prozent angegeben werden, auf die Höhe des umschließenden Blockes beziehen (Elternelement). Wird für diesen umschließenden Block keine Höhe angegeben, so wird der angegebene Prozentwert als auto
interpretiert. Das Element wird trotz Höhenangabe nur so hoch, wie der Inhalt es erfordert.
Auch wenn dieses Verhalten durch die CSS-Spezifikation festgelegt wird, verhalten sich die Browser nicht nur bei CSS-Höhenangaben auf diese Weise, sondern auch bei HTML-Höhenangaben.
Es muss allen Elternelementen eine bestimmte Höhe zugewiesen werden. Dabei darf nicht vergessen werden, dass auch html
und body
Elternelemente sind (für den Internet Explorer würde die Höhenangabe für body
ausreichen, aber nicht für andere Browser).
html, body {
height:100%;
}
<!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">
<head>
<title>Seitentitel</title>
<style type="text/css">
html, body {
height:100%;
}
p {
height:50%;
width:75%;
margin-left:auto;
margin-right:auto;
padding:0.2em;
border:dotted 1px #009;
background-color:#fcfcfc;
}
</style>
</head>
<body>
<p>Diesem Absatz wird mit CSS eine Höhe von 50 % zugewiesen</p>
</body>
</html>
Sobald die Elemente tiefer verschachtelt werden als in dem vorangegangenen Beispiel, reagieren die Browser unabhängig vom Darstellungsmodus sehr unterschiedlich auf fehlende Höhenangaben in übergeordneten Elementen. Nur wenn alle übergeordneten Elemente Höhenangaben als Bezugspunkt erhalten, reagieren die Browser ähnlich.
Safari bis Version 1.2 und Konqueror bis Version 3.3.1 erwarten bei Höhenangaben in Prozent unabhängig vom Darstellungsmodus immer Höhenangaben für sämtliche Elternelemente. Sehr alte Versionen dieser Browser interpretieren Höhenangaben in Prozent gar nicht.
Das html
-Element als Wurzelelement des Dokumentbaumes legt den äußersten umschließenden Block fest. Erhalten die Eigenschaften height
und width
dieses Blockes den Wert auto
(Voreinstellung), so ergeben sich unterschiedliche Bezugspunkte für die Berechnung dieser Größen. Während die Höhe auf den Dokumentinhalt bezogen wird, bezieht sich die Breite auf die Größe des Browserfensters. Prozentangaben für width
werden daher aufgrund des anderen Bezugspunktes nicht die hier beschriebenen Probleme bereiten.
height
-EigenschaftLetzte Änderung des Inhaltes: 13.01.06