Ü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
AnimationstypLängenangabe, Prozentsatz oder calc();
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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidEdge MobileFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
heightChrome Vollständige Unterstützung 1Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 1IE Vollständige Unterstützung 4Opera Vollständige Unterstützung 7Safari Vollständige Unterstützung 1WebView Android Vollständige Unterstützung 1Chrome Android Vollständige Unterstützung 18Edge Mobile Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung 4Opera Android Vollständige Unterstützung 1Safari iOS Vollständige Unterstützung 1Samsung Internet Android Vollständige Unterstützung Ja
max-contentChrome Vollständige Unterstützung 46Edge Keine Unterstützung NeinFirefox Vollständige Unterstützung 66IE Keine Unterstützung NeinOpera Vollständige Unterstützung 44Safari Vollständige Unterstützung JaWebView Android Vollständige Unterstützung 46Chrome Android Vollständige Unterstützung 46Edge Mobile Keine Unterstützung NeinFirefox Android Vollständige Unterstützung 66Opera Android Vollständige Unterstützung 44Safari iOS Vollständige Unterstützung JaSamsung Internet Android Vollständige Unterstützung 5.0
min-contentChrome Vollständige Unterstützung 46Edge Keine Unterstützung NeinFirefox Vollständige Unterstützung 66IE Keine Unterstützung NeinOpera Vollständige Unterstützung 44Safari Vollständige Unterstützung JaWebView Android Vollständige Unterstützung 46Chrome Android Vollständige Unterstützung 46Edge Mobile Keine Unterstützung NeinFirefox Android Vollständige Unterstützung 66Opera Android Vollständige Unterstützung 44Safari iOS Vollständige Unterstützung JaSamsung Internet Android Vollständige Unterstützung 5.0
stretchChrome Vollständige Unterstützung 28
Alternativer Name
Vollständige Unterstützung 28
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: -webkit-fill-available
Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android Vollständige Unterstützung 37
Alternativer Name
Vollständige Unterstützung 37
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: -webkit-fill-available
Chrome Android Vollständige Unterstützung 28
Alternativer Name
Vollständige Unterstützung 28
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: -webkit-fill-available
Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android Vollständige Unterstützung 5.0
fit-contentChrome Vollständige Unterstützung 46Edge Keine Unterstützung NeinFirefox Keine Unterstützung NeinIE Keine Unterstützung NeinOpera ? Safari Vollständige Unterstützung JaWebView Android Vollständige Unterstützung 46Chrome Android Vollständige Unterstützung 46Edge Mobile Keine Unterstützung NeinFirefox Android Keine Unterstützung NeinOpera Android ? Safari iOS Vollständige Unterstützung JaSamsung Internet Android Vollständige Unterstützung 5.0

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Keine Unterstützung  
Keine Unterstützung
Kompatibilität unbekannt  
Kompatibilität unbekannt
Verwendet einen nicht standardisierten Namen.
Verwendet einen nicht standardisierten Namen.

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

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