CSS height – Referenz, Beispiel und Labor

stylesheet.css · height

.probe {
  height: 64px;
}

Dies ist der 1. Absatz. Er steht in einer Box, deren Stil die Regel links oben bestimmt.

berechneter Wertheight: 64px

Box-Breite–

Box-Höhe–

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

Wovon eine Höhe abhängt

Breite und Höhe verhalten sich in CSS nicht symmetrisch. Die Breite eines Blocks ergibt sich aus dem verfügbaren Platz und steht fest, bevor der Inhalt gesetzt wird. Die Höhe ergibt sich aus dem Inhalt und steht erst fest, wenn er gesetzt ist.

Daraus folgt die wichtigste Einschränkung dieser Eigenschaft: Ein Prozentwert braucht einen umschließenden Block mit feststehender Höhe. Hat dieser selbst nur eine aus dem Inhalt abgeleitete Höhe, wird die Angabe wie auto behandelt. Eine Kette von Elementen mit prozentualer Höhe wirkt deshalb erst, wenn irgendwo am Anfang eine feste Höhe steht.

Die zweite Einschränkung nennt die Seite selbst: Auf nicht ersetzte Inline-Elemente wirkt die Eigenschaft nicht. Deren Höhe ergibt sich aus der Zeilenhöhe. Wer einem solchen Element eine Höhe geben will, muss zuerst seinen Anzeigetyp ändern.

Wenn der Inhalt nicht hineinpasst

Eine feste Höhe legt fest, wie hoch die Box ist, nicht wie viel Inhalt hineinpasst. Ist der Inhalt höher, läuft er über und wird standardmäßig sichtbar über den Rand hinaus gezeichnet, ohne die Nachbarn zu verschieben. Erst eine Angabe zum Überlauf entscheidet, ob er abgeschnitten wird oder eine Rollmöglichkeit bekommt.

Weil der Inhalt sich mit der Schriftgröße, der Sprache und der Fensterbreite ändert, ist eine feste Höhe für textführende Elemente riskant. Die Mindesthöhe ist dort fast immer die passendere Angabe: Sie sichert eine Fläche und lässt Raum nach oben.

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.

Weitere Charakteristika

Die Stylesheet-Schnellreferenz mit einer Zusammenfassung aller visuellen Eigenschaften kann auch als PDF-Datei herunter geladen werden.

Ausgangswert: auto
Berechneter Wert: Spezifizierter Wert für '%' und auto; auto, wenn die Eigenschaft nicht anwendbar ist
Vererbung: Nein
Anwendbarkeit: Siehe oben
%-Bezugswert: Siehe oben
Mediengruppe(n): Visual

Verwendete Standards

Dieser CSS-Referenz liegen folgende Spezifikationen zugrunde: CSS 1, CSS 2.1 CR und CSS Mobile.

CSS-Eigenschaft height