Propriété height du CSS
La propriété height est utilisée pour définir la hauteur d'un élément. Cette propriété n'inclut pas le padding, les borders ou les margins. La propriété height peut être spécifiée en "px", "cm", "vh" ou en pourcentages. La valeur par défaut est "auto".
Si les min-height et max-height sont utilisées, elles contraignent la propriété height.
Si height est défini sur l'une des valeurs numériques comme rem, px ou %, et si le contenu ne tient pas dans la hauteur spécifiée, cela provoquera un débordement. La propriété CSS overflow spécifie comment le conteneur gérera ce débordement.
INFO
Les valeurs négatives ne sont pas acceptées.
| Valeur initiale | auto |
|---|---|
| S'applique à | tous les éléments |
| Héritée | Non. |
| Animable | Oui. La hauteur est animable. |
| Version | CSS1 |
| Syntaxe DOM | object.style.height = "400px"; |
Syntaxe
Syntaxe de la propriété height du CSS
height: auto | length | initial | inherit;Exemple de la propriété height :
Exemple de la propriété CSS height avec une valeur de longueur
<!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://www.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://www.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 lors de l'utilisation de 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>Valeurs
| Valeur | Description | Tester |
|---|---|---|
| auto | Lorsque nous utilisons cette valeur, le navigateur calcule la hauteur originale de l'image ou de la boîte. Il s'agit de la valeur par défaut de cette propriété. | Tester » |
| length | Définit la hauteur en px, cm, em, rem, vh, etc. | Tester » |
| % | Définit la hauteur en pourcentage. | |
| initial | Fait utiliser à la propriété sa valeur par défaut. | Tester » |
| inherit | Hérite la propriété de son élément parent. |
Pratique
Quels sont les paramètres possibles pour la propriété height en CSS ?