CSS 2.1: `height`

Erläuterungen

Diese Eigenschaft bestimmt die Höhe des Inhaltes von Block- und replazierten Elementen. height hat keine Wirkung auf nicht-replazierte Inline- Level- Elemente (deren Höhe durch line-height bestimmt wird), und auf die Elemente col und colgroup, die im Dokumentstammbaum nicht auftauchen.

Wichtig zu beachten ist, dass im IE/Win 5.x derselbe Höhenwert durch die falsche Interpretation des Box- Modells völlig veränderte Ausmaße annehmen kann (siehe auch Bild rechts). Abhilfe schafft da nur der Box- Modell-Hack, mit dem man die falsche Darstellung durch nicht standardskompatible Browser korrigieren kann. IE/Win 6 gibt das Webdokument im Quirks-Modus aus, wenn kein oder nur ein unvollständiger HTML- Dokumententyp deklariert wurde.

Erlaubte Werte

Auszug aus der Spezifikation (die verwendete Syntax wird im Artikel CSS-Wertesyntax genauer erläutert):

'height' <length> | <percentage> | auto | inherit

<length>: Eine absolute oder relative Längenangabe, negative Werte sind nicht erlaubt.; Mehr Informationen über Längenwerte in CSS finden Sie im Grundlagenartikel Längenwerte.
<percentage>: Eine Prozentangabe, die auf die Höhe des einschließenden Blocks des Elements bezogen ist. Wenn die Höhe des einschließenden Blocks nicht explizit angegeben ist, dann wird dieser Wert wie auto interpretiert.
auto (Ausgangswert): Das Anwenderprogramm berechnet die Höhe mit Hilfe anderer Höhenangaben. Insgesamt gilt, dass die Summe aus top, margin-top, border-top-width, padding-top, height, padding-bottom, border-bottom-width, margin-bottom und bottom gleich der Höhe des umschließenden Blocks sein muss.; Sind zuviele dieser Maße nicht gegeben, d.h. mit dem Ausgangswert auto belegt, werden in genau definierter Reihenfolge die Werte auto durch '0' ersetzt, bis eine eindeutige vertikale Position für das Element gefunden ist. Sollte es zu Überbestimmungen kommen, dann wird der Wert für bottom ignoriert.
inherit: Bestimmt explizit, dass diese Eigenschaft denselben berechneten Wert wie im Elternelement annimmt.

Code-Beispiel:

P.header { height: 7em; }

Browserunterstützung

Die Eigenschaft height wird von allen modernen Browsern unterstützt, mit folgenden Einschränkungen:

Firefox 1, Mozilla 1,7, etc.: Unter bestimmten Umständen, wenn ein Prozentwert für height deklariert ist, wird der daraus resultierende absolute Wert, nicht aber der Prozentwert selbst, als berechneter Wert weitervererbt.
IE7: Die Trident-Engine des IE/Win kann auch hier mit dem Wert inherit nichts anfangen.

Eric Meyer's CSS2 Test Suite zeigt am praktischen Beispiel, wie die Browser mit dieser Eigenschaft umgehen.

Keine Eigenschaft und kein Selektor stehen in einem Stylesheet für sich allein. In der Praxis kann das Zusammenspiel zwischen verschiedenen Elementen und Selektoren einen nicht zu unterschätzenden Einfluss auf die Fähigkeiten der Browser haben. Bugs treten oft erst durch das Zusammenwirken mehrerer Eigenschaften an unterschiedlichen Elementen auf.

Wechselwirkungen:

top, margin-top, border-top-width, padding-top,
max-height, min-height,
padding-bottom, border-bottom-width, margin-bottom, bottom

Besonderheiten im Medientyp `handheld`:

Diese Eigenschaft ist Teil des Standards CSS Mobile Profile 1.0 und unterliegt damit auch in Mobilgeräten allen relevanten Regeln aus CSS 2.1. Sie wird von fast allen Mobilgeräten erkannt, aber von einigen nur als Maßstabsfaktor verwendet, um größere Elemente entsprechend den Abmessungen des Displays zu verkleinern. Die Eigenschaft height ist also ebenso wie das HTML-Attribut height kein Garant dafür, dass ein Element wirklich in der notierten Größe dargestellt wird.