CSS-Eigenschaft height

❮ Vorige Nächste ❯

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>

Versuch es selber!

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>

Versuch es selber!

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>

Versuch es selber!

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>

Versuch es selber!

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.