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