Propriété CSS height

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>

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>

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>

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>

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.

Support de Navigateurs

1.0+ 12.0+ 1.0+ 1.0+ 7.0+


Trouvez-vous cela utile?

Articles Associées