CSS-Eigenschaft height

Die Eigenschaft height wird verwendet, um die Höhe eines Elements festzulegen. Diese Eigenschaft beinhaltet keine padding, borders oder margins. Die Eigenschaft height kann durch "px", "cm", "vh" oder in Prozent angegeben werden. Der Standardwert ist "auto".

Wenn die Eigenschaften min-height und max-height verwendet werden, überschreibt das die Eigenschaft height.

Negative Werte werden nicht akzeptiert.
Anfangswert auto
Gilt für Alle Elemente
Geerbt Nein
Animierbar Ja, die Höhe ist animierbar.
Version CSS1
DOM Syntax object.style.height = "400px";

Syntax

height: auto | length | initial | inherit;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      div {
      height: 60px;
      background-color: #1c87c9;
      color: #eee;
      }
      p {
      height: 30px;
      background-color: #8ebf42;
      color: #eee;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft hight</h2>
    <div>Die Höhe dieses div-Elements wird auf "60px" eingestellt.</div>
    <p>Die Höhe dieses Absatzes ist auf "30px" eingestellt.</p>
  </body>
</html>

Hier ist ein weiteres Beispiel, wo height für ein Bild angegeben ist.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      body {background-color: #ccc;}
      .height-normal {height: auto;}
      .height-big {height: 100px;}
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft</h2>
    <p>Hier ist height auf "auto" eingestellt.</p>
    <img class="height-normal" src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png"><br>
    <hr>
    <p>Die Höhe für dieses Bild ist durch "100px" definiert.</p>
    <img class="height-big" src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png">
  </body>
</html>

Sehen Sie sich ein weiteres Beispiel, wo die Eigenschaft height für ein Container durch "vh" angegeben ist.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .container {
      height: 50vh;
      border: 2px solid #1c87c9;
      padding: 5px;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft</h2>
    <div class="container">
      <p>Hier ist die Höhe auf "50vh" eingestellt.</p>
    </div>
  </body>
</html>

Hier sehen Sie ein Beispiel, wo alle Werte dargestellt sind.

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</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>Beispiel für die Eigenschaft</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>

Werte

Wert Beschreibung
auto Wenn wir diesen Wert verwenden, berechnet der Browser die ursprüngliche Höhe des Bilds oder der Box. Das ist der Standardwert dieser Eigenschaft.
length Definiert die Höhe durch px, cm usw.
% Definiert die Höhe mit Prozent.
initial Der Wert stellt die Eigenschaft auf seinen Standardwert ein.
inherit Der Wert erbt die Eigenschaft von seinem übergeordneten Element.

Browser-Support

chrome edge firefox safari opera
1.0+ 12.0+ 1.0+ 1.0+ 7.0+

Übe dein Wissen

Wie kann die CSS-Höhenangabe in CSS verwendet werden?
Finden Sie das nützlich?