Propriété de hauteur CSS
Exemple
Définissez la hauteur de deux éléments <div> :
div.a {
height: auto;
border:
1px solid black;
}
div.b {
height: 50px;
border: 1px solid black;
}
Plus d'exemples "Essayez-le vous-même" ci-dessous.
Définition et utilisation
La height
propriété définit la hauteur d'un élément.
La hauteur d'un élément n'inclut pas le rembourrage, les bordures ou les marges !
Si height: auto;
l'élément ajustera automatiquement sa hauteur pour permettre à son contenu d'être affiché correctement.
Si height
est défini sur une valeur numérique (comme les pixels, (r)em, les pourcentages), alors si le contenu ne tient pas dans la hauteur spécifiée, il débordera. La manière dont le conteneur gérera le contenu débordant est définie par la
propriété overflow .
Remarque : Les propriétés min-height et
max-height remplacent la
height
propriété.
Valeur par défaut: | auto |
---|---|
Hérité: | non |
Animable : | Oui. En savoir plus sur l'animation |
Version: | CSS1 |
Syntaxe JavaScript : | objet .style.height="500px" |
Prise en charge du navigateur
Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge la propriété.
Property | |||||
---|---|---|---|---|---|
height | 1.0 | 4.0 | 1.0 | 1.0 | 7.0 |
Syntaxe CSS
height: auto|length|initial|inherit;
Valeurs de propriété
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 |
Plus d'exemples
Exemple
Définissez la hauteur d'un élément à 50 % de la hauteur de l'élément parent :
#parent {
height: 100px;
}
#child {
height: 50%;
}
Pages connexes
Tutoriel CSS : Hauteur et largeur CSS
Tutoriel CSS : Modèle CSS Box
Référence CSS : propriété width
Référence HTML DOM : propriété height