CSS - Höheneigenschaft
Beispiel
Legen Sie die Höhe von zwei <div>-Elementen fest:
div.a {
height: auto;
border:
1px solid black;
}
div.b {
height: 50px;
border: 1px solid black;
}
Weitere „Probieren Sie es selbst“-Beispiele weiter unten.
Definition und Verwendung
Die height
Eigenschaft legt die Höhe eines Elements fest.
Die Höhe eines Elements beinhaltet keine Füllung, Rahmen oder Ränder!
Wenn height: auto;
das Element automatisch seine Höhe anpasst, damit sein Inhalt korrekt angezeigt werden kann.
Wenn height
auf einen numerischen Wert gesetzt ist (wie Pixel, (r)em, Prozentsätze), dann wird der Inhalt überlaufen, wenn er nicht in die angegebene Höhe passt. Wie der Container mit dem überlaufenden Inhalt umgeht, wird durch die
Overflow- Eigenschaft definiert.
Hinweis: Die Eigenschaften min-height und
max-height setzen die Eigenschaft außer Kraft
height
.
Standardwert: | Auto |
---|---|
Vererbt: | Nein |
Animierbar: | ja. Lesen Sie mehr über animierbare |
Ausführung: | CSS1 |
JavaScript-Syntax: | Objekt .style.height="500px" |
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die die Eigenschaft vollständig unterstützt.
Property | |||||
---|---|---|---|---|---|
height | 1.0 | 4.0 | 1.0 | 1.0 | 7.0 |
CSS-Syntax
height: auto|length|initial|inherit;
Eigenschaftswerte
Value | Description | Play it |
---|---|---|
auto | The browser calculates the height. This is default | |
length | Defines the height in px, cm, etc. Read about length units | |
% | Defines the height in percent of the containing block | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Mehr Beispiele
Beispiel
Stellen Sie die Höhe eines Elements auf 50 % der Höhe des übergeordneten Elements ein:
#parent {
height: 100px;
}
#child {
height: 50%;
}
Verwandte Seiten
CSS-Tutorial: CSS-Höhe und -Breite
CSS-Tutorial: CSS-Box-Modell
CSS-Referenz: width-Eigenschaft
HTML-DOM-Referenz: Höheneigenschaft