CSS hoogte eigenschap
Voorbeeld
Stel de hoogte in van twee <div> elementen:
div.a {
height: auto;
border:
1px solid black;
}
div.b {
height: 50px;
border: 1px solid black;
}
Meer "Probeer het zelf" voorbeelden hieronder.
Definitie en gebruik
De height
eigenschap bepaalt de hoogte van een element.
De hoogte van een element is exclusief opvulling, randen of marges!
Als height: auto;
het element automatisch de hoogte aanpast om de inhoud correct weer te geven.
Als height
het is ingesteld op een numerieke waarde (zoals pixels, (r)em, percentages), zal de inhoud overlopen als de inhoud niet binnen de opgegeven hoogte past. Hoe de container de overlopende inhoud zal verwerken, wordt bepaald door de
overloopeigenschap .
Opmerking: de eigenschappen min-height en
max-height hebben voorrang op de
height
eigenschap.
Standaardwaarde: | auto |
---|---|
geërfd: | Nee |
Animeerbaar: | Ja. Lees over animeren |
Versie: | CSS1 |
JavaScript-syntaxis: | object .style.height="500px" |
Browserondersteuning
De getallen in de tabel geven de eerste browserversie aan die de eigenschap volledig ondersteunt.
Property | |||||
---|---|---|---|---|---|
height | 1.0 | 4.0 | 1.0 | 1.0 | 7.0 |
CSS-syntaxis
height: auto|length|initial|inherit;
Eigendomswaarden
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 |
Meer voorbeelden
Voorbeeld
Stel de hoogte van een element in op 50% van de hoogte van het bovenliggende element:
#parent {
height: 100px;
}
#child {
height: 50%;
}
Gerelateerde pagina's
CSS-zelfstudie: CSS-hoogte en -breedte
CSS-zelfstudie: CSS Box-model
CSS-referentie: eigenschap width
HTML DOM-referentie: eigenschap height