CSS/Eigenschaften/Größenangaben/max-height

Aus SELFHTML-Wiki
< CSS‎ | Eigenschaften‎ | Größenangaben(Weitergeleitet von Max-height)
Wechseln zu: Navigation, Suche

Die Eigenschaft max-height legt die maximale Höhe eines CSS-Elements fest. Hierbei wird die Höhe des Elements so lange an den Inhalt angepasst, bis der angegebene Wert erreicht ist.

  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
  • CSS 2.0
Beispiel ansehen …
<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>Boxen mit height bzw. max-height</title>
    <style>
      div {
        background: khaki;
        float: left;
        height: auto;
        margin: 1em;
        width: 10em;
      }
      .hoehe_10 { height: 10em; }
      .max_10 { max-height: 10em; }
    </style>
  </head>
  <body>
    <h1>Boxen mit height bzw. max-height</h1>
      <div class="hoehe_10">
        <code>feste Höhe: 10em;</code>
        <p>In jedem Kino heißt es bei Überlänge Zuschlag bis zu
          1,50 Euro. Ab wann hat ein Film eigentlich Überlänge?
        </p>
      </div>
      <div class="max_10">
        <code>maximale Höhe: 10em;</code>
        <p>Ab wann hat ein Kinofilm eigentlich Überlänge?</p>
      </div>
      <div class="max_10">
        <code>maximale Höhe: 10em;</code>
        <p>Die normale Spieldauer bei Kinofilmen liegt zwischen
          90 und 105 Minuten (damaliger Video-Standard).
          <br/>
          Alles über diese Zeit kann als Überlänge eingepreist
          werden.
        </p>
      </div>
  </body>
</html>
Die linke Box ist 10em hoch. Die mittlere Box ist so hoch wie die Kindelemente, maximal jedoch 10em. Allerdings ist aber auch die dritte Box nur maximal 10em hoch. Der überlange Text läuft über das Element heraus.

Erlaubt sind folgende Werte:

  • eine nicht-negative Längenangabe
  • eine Prozentangabe, dieser bezieht sich auf die Höhe des umschließenden Blocks
  • none, keine maximale Höhe, Ausgangswert
  • inherit, Höhenangabe des Elternelements
Beachten Sie: Ein Überlaufen von zu langem Text kann mit overflow formatiert werden.

siehe auch[Bearbeiten]