Der eigene Online-Shop für Profi-Fotografen. Für Fotografen, die keine Zeit zu verlieren haben.

CSS-Eigenschaft: min-height, Kategorien: Ausmaße (Höhen und Breiten) (allgemein), Visual formatting model details (CSS 2.1), Basic Box Model (CSS 3), Flexible Box Layout (CSS 3)

Mindesthöhe

Bestimmt die Mindesthöhe eines Block-Elements.

CSS-Eigenschaft: min-height
KurzbeschreibungWerteStandardwertKategorieHinweis
Mindesthöhe
  • <length>
  • <percentage>
  • none
  • inherit
none
Allgemein:
Ausmaße (Höhen und Breiten)
CSS 2.1:
Visual formatting model details
CSS 3:
Basic Box Model
Flexible Box Layout
 

Folgendes ist beim Einsatz von min-height zu beachten:

  • Über min-height wird festgelegt, wie hoch ein Block-Element mindestens sein soll. Falls wenig Inhalt vorhanden ist, nimmt die Box trotzdem die definierte Höhe ein. Falls mehr Inhalt als die definierte min-height vorhanden ist, dehnt sich das Element in die Höhe aus. Dies entspricht dem "natürlichen" Verhalten eines Block-Elements.
  • min-height unterscheidet sich von height in der automatischen Ausdehnung in der Höhe. Falls in einer Box mit einer definierten height mehr Inhalt als Platz ist, kommt es zur Textüberlappung. Das Element dehnt sich nicht aus.
  • Der Internet Explorer 6 unterstützt min-height nicht. Allerdings verhält sich height im IE6 wie min-height. Blöcke wachsen mit dem Inhalt, es kommt nicht zu Textüberlappungen. Setzt man min-height ein, bietet sich folgender IE6 Hack an:
    div {min-height:200px;}
    * html div {height:200px;}
    Dieser "Star-HTML-Hack" wird nur vom Internet Explorer 6 ausgelesen. Da sich im IE6 height wie min-heigth verhält, erzielt man denselben Effekt. Weitere Informationen zu dem Hack siehe unter http://www.css-hack.de/Internet+Explorer/IE+6
  • Inline-Elemente können mit min-height nicht gesteuert werden. Damit die Eigenschaft greifen kann, muss ein Inline-Element über display: block als Block-Element definiert werden.
Browserunterstützung von min-height
Firefox
Firefox
Google Chrome
Google
Chrome
Internet Explorer
Internet
Explorer
Safari
Safari
Opera
Opera
CSS21
Version: 16Version: 25Version: 30Version: 31Version: 32
j
Version: 20Version: 30Version: 35Version: 36Version: 37
j
Version: 8Version: 9Version: 10Version: 11
j
Version: 4Version: 5Version: 6Version: 7
j
Version: 10Version: 11Version: 12
j

Weiterführende Informationen zu min-height:

  • letzte CSS-Eigenschaft (Acc-Key: ALT + SHIFT + z):
    max-zoom


Beispiele

HTML:

<div class="doMinHeight">nur wenig text</div>

CSS:

div {
    border: 1px solid #000;
}
div.doMinHeight {
   min-height: 75px;
}
/* Diese Angabe steuert alle Beispiele.
Auch wenn nur wenig Text vorhanden ist, wird die Minimale Höhe eingenommen. */
* div.doMinHeight {
   height: 75px;
}
/* Für den IE6 kann man über den "Star-HTML-Hack" die Höhe setzen, die sich wie min-height verhält. */

Beispiel Nr. 1 So sieht's aus:

nur wenig text
 

HTML:

<div class="doMinHeight">hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier</div>

CSS:

/* Mehr Inhalt als die angegebenen 75px deht die Box aus, es gibt keine Höhenbeschränkung. */

Beispiel Nr. 2 So sieht's aus:

hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier
 

HTML:

<div class="doFixHeight">hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier</div>

CSS:

div.doFixHeight {
   height: 100px;
}
/* Hier wird der Unterschied zu height deutlich. Die per height definierte Höhe wird eingehalten, selbst wenn mehr Inhalt in der Box vorhanden ist. Es kommt zu Textüberlagerungen.
Dies passiert allerdings nicht im IE6. */

Beispiel Nr. 3 So sieht's aus:

hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier ganz viel text hier
 

HTML:

<span class="doMinHeight">nur wenig text</span>

CSS:

span {
    border: 1px solid #ff0000;
}            span.doMinHeight {
   min-height: 75px;
}
/* min-heigt greift nicht auf Inline-Elemente.  */

Beispiel Nr. 4 So sieht's aus:

nur wenig text
 

HTML:

<span class="doMinHeight doBlock">nur wenig text</span>

CSS:

span.doBlock {
   display: block;
}
/* Damit min-heigth auf Inline-Elemente greift, müssen diese in Block-Elemente definiert werden. */

Beispiel Nr. 5 So sieht's aus:

nur wenig text
 

Fehler melden

Diese Referenz ist ein Freizeitprojekt ohne aufwendiges Lektorat oder Vergleichbarem. Von daher lassen sich bei dem Umfang dieser Referenz trotzt größtmöglicher Sorgfalt Fehler nicht vermeiden.

Hilf, die Qualität dieser Seite zu verbessern! Sollte Dir ein Fehler auffallen, sei es in den Erklärungen, Beispielen oder den Informationen zum Browsersupport, seien es orthographische oder grammatikalische, sende eine kurze E-Mail an info@css-wiki.com. Auch Anregungen und Verbesserungsvorschläge sind jeder Zeit Willkommen. Jede E-Mail wird persönlich beantwortet!

Vielen Dank!

A-Z:

Schnell­auswahl

Seiten:

Letzte Änderung: 01. 04. 2017
Render Time: 4.582 sec.

Browser-Marktanteile