height
Définit la hauteur d’un élément.
- Valeur initiale
auto- Héritée
- Non
- Animable
- oui, en tant que longueur ou pourcentage
- S’applique à
- tous les éléments sauf les éléments en ligne non remplacés (par exemple `<span>`), les lignes de tableau et les groupes de lignes
- JavaScript
element.style.height = "120px"
Exemple
#.hero {
min-height: 160px;
display: grid;
place-items: center;
}<section class="hero stage">
<strong>Commencez à apprendre à programmer</strong>
</section>Définition et utilisation
#La propriété height définit la hauteur de la zone de contenu d’un élément. Par défaut (auto), l’élément est exactement aussi haut que son contenu, et c’est généralement le meilleur réglage.
Une hauteur en pourcentage ne fonctionne que si le parent a une hauteur explicitement définie. Si la hauteur du parent dépend de son contenu, height: 50% se comporte comme auto.
Une hauteur fixe est souvent un piège : quand le contenu grandit (texte plus long, taille de police agrandie par l’utilisateur), il déborde de l’élément. min-height est un choix plus sûr.
Syntaxe
#height: auto | <longueur> | <pourcentage> | min-content | max-content | fit-content;Valeurs
#Valeurs en pratique
#auto
.demo { height: auto; }100px
.demo { height: 100px; }100%
height: 150px..demo { height: 100%; }Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Pour les blocs de texte, utilisez
min-heightplutôt queheight, pour que le contenu ne déborde pas de l’élément. - Si
height: 100%ne fonctionne pas, vérifiez que le parent a une hauteur définie.
Entrées associées
#- widthDéfinit la largeur d’un élément.
- min-heightDéfinit une hauteur minimale, tout en laissant l’élément grandir avec son contenu.
- max-heightDéfinit la hauteur maximale d’un élément.
- overflowDécide quoi faire du contenu qui ne tient pas dans un élément.
- aspect-ratioDéfinit le rapport entre la largeur et la hauteur d’un élément.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.