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

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Die Eigenschaft min-height legt die Mindesthöhe eines Elements fest. Sie mag zuerst keinen Unterschied zu height aufweisen, allerdings wird die Höhe eines Element, dessen Inhalt größer als mit min-height angegeben ist, automatisch erhöht.

  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
  • CSS 2.0
Beispiel ansehen …
<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>min-height</title>
    <style>
      p {
        background: khaki;
        float: left;
        height: auto;
        margin: 1em;
        width: 10em;
      }
      .mindesthoehe {
        min-height: 100px;
      }
    </style>
  </head>
  <body>
    <h1>(Mindest-)höhenangaben</h1> 
    <p> Lorem ipsum </p>
    <p class="mindesthoehe"> Lorem ipsum </p>
    <p class="mindesthoehe">
      Während der erste Absatz nur die Höhe des einzeiligen
      Textes hat, wird der 2. Absatz mindestens 100px hoch.
      Falls der Text länger wird, wächst die Box mit.
    </p>
  </body> 
</html>
Während der erste Absatz nur die Höhe des einzeiligen Textes hat, wird der 2. Absatz mindestens 100px hoch. Falls der Text länger wird, wächst die Box mit.

Erlaubt sind folgende Werte:

  • eine nicht-negative Längenangabe
  • eine Prozentangabe, dieser bezieht sich auf die Höhe des umschließenden Blocks
  • auto, weist den Browser an, die Höhe so zu ermitteln, als ob keine Angabe zu height erfolgt wäre, Ausgangswert
  • inherit, Höhenangabe des Elternelements

[Bearbeiten] siehe auch

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML