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.
Kurzbeschreibung | Werte | Standardwert | Kategorie | Hinweis |
---|---|---|---|---|
Mindesthöhe |
| none |
|
Verwandte Eigenschaften aus der Kategorie: Ausmaße (Höhen und Breiten) (allgemein), Visual formatting model details (CSS 2.1), Basic Box Model (CSS 3), Flexible Box Layout (CSS 3):
- align-content
- align-items
- align-self
- box-sizing
- clear
- display
- flex
- flex-basis
- flex-direction
- flex-flow
- flex-grow
- flex-shrink
- flex-wrap
- float
- height
- justify-content
- line-height
- margin
- margin-bottom
- margin-left
- margin-right
- margin-top
- marquee-direction
- marquee-play-count
- marquee-speed
- marquee-style
- max-height
- max-width
- Aktuelle Seite: min-height
- min-width
- order
- overflow
- overflow-style
- overflow-x
- overflow-y
- padding
- padding-bottom
- padding-left
- padding-right
- padding-top
- rotation
- rotation-point
- vertical-align
- visibility
- width
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.
Firefox | Chrome | Internet Explorer | Safari | Opera |
|||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
CSS21 |
|
|
|
|
|
Weiterführende Informationen zu min-height:
- W3C Spezifikation:
http://www.w3.org/TR/css3-box/#min-height
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 textHTML:
<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 textFehler 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!