Propriété CSS height

❮ Précédent Suivant ❯

La propriété height est utilisée pour définir la hauteur d'un élément. Cette propriété n'inclut pas padding, borders, ou margins. La propriété height peut être spécifiée par "px", "cm", "vh" ou par pourcentages. La valeur initiale est "auto".

S'il y a utilisées les propriétés min-height et max-height, cela va passer outre à la propriété height.

Valeurs négatives ne sont pas acceptées.

Valeur initiale	auto
Appliquée à	Tous les éléments
Héritée	Non.
Animable	Oui. La hauteur est animable.
Version	CSS1
Syntaxe DOM	object.style.height = "400px";

Syntaxe

height: auto | length | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      div {
      height: 60px;
      background-color: #1c87c9;
      color: #eee;
      }
      p {
      height: 30px;
      background-color: #8ebf42;
      color: #eee;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété height</h2>
    <div>La hauteur de cet élément div est définie à "60px"</div>
    <p>La hauteur de ce paragraphe est définie à "30px".</p>
  </body>
</html><!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      div {
      height: 60px;
      background-color: #1c87c9;
      color: #eee;
      }
      p {
      height: 30px;
      background-color: #8ebf42;
      color: #eee;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété height</h2>
    <div>La hauteur de cet élément div est définie à  "60px"</div>
    <p>La hauteur de ce paragraphe est définie à "30px".</p>
  </body>
</html>

Essayez-vous-même!

Voici un autre exemple, où la propriété height est spécifiée pour une image.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      body {background-color: #ccc;}
      .height-normal {height: auto;}
      .height-big {height: 100px;}
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété height </h2>
    <p>Ici la hauteur est définie à "auto"</p>
    <img class="height-normal" src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png"><br>
    <hr>
    <p>La hauteur de cet image est définie à "100px".</p>
    <img class="height-big" src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png">
  </body>
</html>

Essayez-vous-même!

Un autre exemple, où la propriété height du conteneur est spécifiée par "vh".

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .container {
      height: 50vh;
      border: 2px solid #1c87c9;
      padding: 5px;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété height</h2>
    <div class="container">
      <p>Ici la hauteur est spécifiée comme "50vh".</p>
    </div>
  </body>
</html>

Essayez-vous-même!

Voici un exemple, où toutes les valeurs sont illustrées.

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du 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>Exemple de la propriété height</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>

Essayez-vous-même!

Valeurs

Valeur	Description
auto	Quand on utilise cette valeur, le navigateur calcule la hauteur originelle de l'image ou de la boîte. C'est la valeur initiale de cette propriété.
length	Définit la hauteur avec px, cm etc.
%	Définit la hauteur en pourcents.
initial	Définit la valeur initiale.
inherit	Hérite la propriété de l'élément parent.