Browser ignorieren Prozentangaben für `height`

Problem:

Die Browser berücksichtigen im Standards Mode keine Höhenangaben, deren Werte in Prozent angegeben werden. Das Element, dem die Höhe zugewiesen wird, wird maximal so hoch wie der darin enthaltene Inhalt. Unter bestimmten Umständen tritt das Problem auch im Quirks Mode auf (siehe »Sonstiges«).

Unterschiede durch DOCTYPE-Switch in:

Mozilla, Opera, Internet Explorer, Safari ab 1.3, Konqueror ab 3.3.2

Ursache:

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.

Lösung:

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%;
}

Beispiele:

Ohne Höhenangaben für Elternelemente im Standards Mode

Mit Höhenangaben für Elternelemente im Standards Mode

<!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>

Sonstiges:

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.

Verwandte Themen:

Berechnung von Element-Größen: Der CSS-Box-Model-Bug
Größenangaben für Inline-Elemente: Browser ignorieren Größenangaben

Literatur:

W3C CSS 2-Spezifikation – Höhe des Inhaltes: Die height-Eigenschaft
W3C CSS 2-Spezifikation – Einführung in das visuelle Formatierungsmodell – Umschließende Blöcke
W3C CSS 2-Spezifikation – Definition des »umschließenden Blockes«

Letzte Änderung des Inhaltes: 13.01.06

Browser ignorieren Prozentangaben für height

Browser ignorieren Prozentangaben für `height`