Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

Ü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.

Initialwertauto
Anwendbar aufalle Elemente außer nicht ersetzte Inlineelemente, Tabellenspalten und Spaltengruppen
VererbtNein
ProzentwerteDer 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.
Medienvisuell
Berechneter Wertein Prozentwert oder auto oder die absolute Länge
Animierbarja, 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 Reihenfolgedie 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

Browser Kompatibilität

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

Schlagwörter des Dokuments und Mitwirkende

Schlagwörter: 
 Mitwirkende an dieser Seite: mrstork, Sebastianz, fscholz, SJW, Jürgen Jeka, Michael2402
 Zuletzt aktualisiert von: mrstork,