Propriété CSS height
La propriété CSS height définit la hauteur d'un élément. Essayez des exemples avec chacune des valeurs de cette propriété.
La propriété CSS height définit la hauteur de la boîte de contenu d'un élément — la zone où résident le texte et les éléments enfants. Par défaut (height: auto), le navigateur dimensionne un élément de type bloc de façon à englober son contenu, donc vous ne définissez height que lorsque vous avez besoin d'une taille fixe ou relative à la place.
Par défaut, la valeur que vous donnez s'applique uniquement à la boîte de contenu — elle n'inclut pas le padding, les bordures ni les marges. Un élément <div> avec height: 100px; padding: 20px aura donc une hauteur de 140px à l'écran. Pour que height inclue le padding et la bordure, définissez box-sizing: border-box — une bonne pratique quasi universelle. La propriété associée est width, qui fonctionne de la même façon pour l'axe horizontal.
Vous pouvez exprimer la hauteur comme une longueur (px, em, rem, vh, cm, …) ou comme un pourcentage. La valeur par défaut est auto.
Si les propriétés min-height et max-height sont également définies, elles contraignent height : l'élément ne rétrécit jamais en dessous de min-height ni ne dépasse max-height.
Lorsque height est une valeur numérique et que le contenu est plus grand que cette hauteur, le contenu déborde de sa boîte. La propriété overflow contrôle ce qui se passe alors — le rogner, le masquer ou ajouter une barre de défilement.
Les valeurs négatives ne sont pas acceptées.
Le piège des pourcentages. Un height en pourcentage est résolu par rapport à la hauteur de l'élément parent — et seulement si ce parent possède lui-même une hauteur explicite. Si la hauteur du parent est auto (la valeur par défaut), height: 50% d'un enfant n'a pas de référence fixe et est traité comme auto, ce qui ne produit apparemment aucun effet. Pour que les hauteurs en pourcentage se propagent jusqu'à la page, donnez aux ancêtres une hauteur explicite — généralement html, body { height: 100%; } — ou utilisez l'unité de viewport vh (height: 50vh correspond toujours à la moitié du viewport, indépendamment du parent).
| Valeur initiale | auto |
|---|---|
| S'applique à | tous les éléments |
| Héritage | Non. |
| Animatable | Oui. La hauteur est animatable. |
| Version | CSS1 |
| Syntaxe DOM | object.style.height = "400px"; |
Syntaxe
Syntaxe de la propriété CSS height
height: auto | length | initial | inherit;Exemple de la propriété height :
Exemple de la propriété CSS height avec la valeur length
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
div {
height: 60px;
background-color: #1c87c9;
color: #eee;
}
p {
height: 30px;
background-color: #8ebf42;
color: #eee;
}
</style>
</head>
<body>
<h2>Height property example</h2>
<div>The height of this div element is set to "60px".</div>
<p>The height of this paragraph is set to "30px".</p>
</body>
</html>Résultat
Exemple de la propriété height avec la balise HTML <image> :
Exemple de la propriété CSS height avec les valeurs auto et length
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
body {
background-color: #ccc;
}
.height-normal {
height: auto;
}
.height-big {
height: 100px;
}
</style>
</head>
<body>
<h2>Height property example</h2>
<p>Here the height is set to "auto"</p>
<img class="height-normal" src="https://api.w3docs.com/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" />
<br />
<hr />
<p>The height for this image is defined as "100px".</p>
<img class="height-big" src="https://api.w3docs.com/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" />
</body>
</html>Exemple de la propriété height avec la valeur "length" :
Exemple de la propriété CSS height avec la valeur vh
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
.container {
height: 50vh;
border: 2px solid #1c87c9;
padding: 5px;
}
</style>
</head>
<body>
<h2>Height property example</h2>
<div class="container">
<p>Here the height is specified as "50vh".</p>
</div>
</body>
</html>Exemple de la propriété height avec toutes les valeurs :
Exemple de la propriété CSS height avec les valeurs auto, vh, % et px
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
.red-container {
height: 30vh;
border: 2px solid #f45e30;
color: #f45e30;
}
.blue-container {
height: 40%;
width: 30%;
border: 2px solid #1c87c9;
color: #1c87c9;
margin-top: 20px;
}
.orange-container {
height: 100px;
border: 2px solid #f9fc35;
color: #f9fc35;
margin-top: 20px;
}
.green-container {
height: auto;
border: 2px solid #8ebf42;
color: #8ebf42;
margin-top: 20px;
}
</style>
</head>
<body>
<h2>Height property example</h2>
<div class="red-container">
Height 30vh
<div class="blue-container">
Height 40%
</div>
</div>
<div class="orange-container">
Height 100px;
</div>
<div class="green-container">
Height (auto)
</div>
</body>
</html>Mots-clés de dimensionnement intrinsèque
Au-delà des longueurs fixes et des pourcentages, le CSS moderne ajoute des mots-clés qui dimensionnent un élément par rapport à son contenu plutôt qu'à une valeur numérique :
.box {
height: max-content; /* tall enough for the content, never wrapping it shorter */
}
.box {
height: min-content; /* the smallest height the content can take */
}
.box {
height: fit-content; /* like auto, but clamps to fit-content(<length>) when given */
}Ces mots-clés sont particulièrement utiles dans les mises en page flex et grid, lorsque vous souhaitez qu'une piste ou un élément épouse son contenu plutôt que de s'étirer. Ils sont largement pris en charge par les navigateurs actuels.
Valeurs
| Valeur | Description | Essayer |
|---|---|---|
| auto | Avec cette valeur, le navigateur calcule la hauteur originale de l'image ou de la boîte. C'est la valeur par défaut de cette propriété. | Essayer » |
| length | Définit la hauteur en px, cm, em, rem, vh, etc. | Essayer » |
| % | Définit la hauteur en pourcentage. | |
| initial | Réinitialise la propriété à sa valeur par défaut. | Essayer » |
| inherit | Hérite la propriété de son élément parent. |