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.

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.
Berechneter Wertein Prozentwert oder auto oder die absolute Länge
AnimationstypLängenangabe, Prozentsatz oder calc();

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  This is an experimental API that should not be used in production code.
Falls angegeben, wird die vorhergehende <length> oder <percentage> auf die Rahmenbox des Elements angewendet.
content-box  This is an experimental API that should not be used in production code.
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  This is an experimental API that should not be used in production code.
Die innere bevorzugte Höhe.
min-content  This is an experimental API that should not be used in production code.
Die innere Minimalhöhe.
available  This is an experimental API that should not be used in production code.
Die Höhe des beinhaltenden Blocks minus vertikaler Außenabstand, Rahmen und Innenabstand.
fit-content  This is an experimental API that should not be used in production code.
Die größere der:
  • inneren Minimalhöhe
  • kleineren der inneren bevorzugten und der verfügbaren Höhe

Formale Syntax

auto | <length> | <percentage> | min-content | max-content | fit-content | fit-content(<length-percentage>)

wobei
<length-percentage> = <length> | <percentage>

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.
Anwärter Empfehlung 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

BCD tables only load in the browser

Siehe auch