height

Übersicht

Die height CSS Eigenschaft bestimmt die Höhe des Inhaltsbereichs eines Elements. Der Inhaltsbereich ist innerhalb des Innenabstands, der Rahmen und des Außenabstands des Elements.

Die Eigenschaften min-height und max-height überschreiben height.

Initialwert	`auto`
Anwendbar auf	alle Elemente außer nicht ersetzte Inlineelemente, Tabellenspalten und Spaltengruppen
Vererbt	Nein
Prozentwerte	Der Prozentwert wird unter Berücksichtigung der Höhe des die generierte Box beinhaltenden Blocks berechnet. Falls die Höhe des beinhaltenden Blocks nicht explizit angegeben wurde (d. h. sie hängt von der Höhe des Inhalts ab) und dieses Element nicht absolut positioniert ist, ist der berechnete Wert `auto`. Eine prozentuale Höhe beim Wurzelelement ist relativ zum ursprünglichen beinhaltenden Block.
Medien	visuell
Berechneter Wert	ein Prozentwert oder `auto` oder die absolute Länge
Animierbar	ja, als Längenangabe, Prozentsatz oder `calc()`; wenn beides Längenwerte sind, werden sie als Längenwerte gehandhabt. Wenn beides Prozentsätze sind, werden sie als Prozentsätze gehandhabt. Ansonsten werden beide Werte wie in einer `calc()` Funktion addiert (Wird ggf. zu Null). Und bei diesen `calc()` Funktionen wird jede Hälfte als Realzahl interpoliert.
Kanonische Reihenfolge	die eindeutige Reihenfolge definiert durch die formale Grammatik

Syntax

/* Schlüsselwortwert */
height: auto;

/* <length> Werte */
height: 120px;
height: 10em;

/* <percentage> Wert */
height: 75%;

/* Globale Werte */
height: inherit;
height: initial;
height: unset;

Werte

<length>

Siehe <length> für mögliche Einheiten.

<percentage>

Definiert als eine <percentage> der Höhe des beinhaltenden Blocks.

border-box

Falls angegeben, wird die vorhergehende <length> oder <percentage> auf die Rahmenbox des Elements angewendet.

content-box

Falls angegeben, wird die vorhergehende <length> oder <percentage> auf die Inhaltsbox des Elements angewendet.

auto

Der Browser berechnet und wählt die Höhe für das angegebene Element aus.

max-content

Die innere bevorzugte Höhe.

min-content

Die innere Minimalhöhe.

available

Die Höhe des beinhaltenden Blocks minus vertikaler Außenabstand, Rahmen und Innenabstand.

fit-content

Die größere der:

inneren Minimalhöhe
kleineren der inneren bevorzugten und der verfügbaren Höhe

Formale Syntax

[<length> | <percentage>] && [border-box | content-box]? | available | min-content | max-content | fit-content | auto

Beispiel

HTML

<div id="red">
  <span>Ich bin 50 Pixel hoch.</span>
</div>
<div id="green">
  <span>Ich bin 25 Pixel hoch.</span>
</div>
<div id="parent">
  <div id="child">
    <span>Ich bin halb so groß wie mein Elternelement.</span>
  </div>
</div>

CSS

div {
  width: 250px;
  margin-bottom: 5px;
  border: 3px solid #999999;
}

#red {
  height: 50px;
}

#green {
  height: 25px;
}

#parent {
  height: 100px;
}

#child {
  height: 50%;
  width: 75%;
}

Spezifikationen

Spezifikation	Status	Kommentar
CSS Basic Box Model Die Definition von 'height' in dieser Spezifikation.	Arbeitsentwurf	Fügt die Schlüsselwörter `max-content`, `min-content`, `available`, `fit-content`, `border-box` und `content-box` hinzu.
CSS Transitions Die Definition von 'height' in dieser Spezifikation.	Arbeitsentwurf	Definiert `height` als animierbar.
CSS Level 2 (Revision 1) Die Definition von 'height' in dieser Spezifikation.	Empfehlung	Fügt Unterstützung für `<length>` Werte hinzu und präzisiert, für welche Elemente die Eigenschaft gilt.
CSS Level 1 Die Definition von 'height' in dieser Spezifikation.	Empfehlung	Ursprüngliche Definition

Merkmal	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Grundlegende Unterstützung	1.0	1.0 (1.7 oder früher)	4.0	7.0	1.0

Merkmal	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Grundlegende Unterstützung	1.0	1.0 (1)	6.0	6.0	1.0

Siehe auch

Boxmodell, width, box-sizing, min-height, max-height