Webdesign, Tutorials und mehr - Webmasterpro.de

min-height: Minimalhöhe

Durch die Eigenschaft min-height kann die minimale Höhe für ein Element definiert werden, die bei der Darstellung nicht unterschritten wird. Als Werte stehen hierbei Längen und prozentuale Angaben zur Verfügung, wie alle Höhenangaben müssen diese jedoch größer als 0 sein.

Durch diese Eigenschaft lassen sich beispielsweise Layouts erstellen, die sich über die gesamte Höhe der Webseite erstrecken, in dem eine Mindesthöhe von 100% angegeben wird. Hierbei ist jedoch zu beachten, dass den Elementen html, body ebenfalls eine Höhe von 100% zugewiesen wird.

Außerdem kann die Mindesthöhe mit einer Maximalhöhe kombiniert werden, wenn ein Element eine Höhe in einem bestimmten Bereich annehmen soll.

Kompatibilität

Wie auch bei der Maximalhöhe ist der Microsoft Internet Explorer in der Version 6 nicht in der Lage diese Eigenschaft zu interpretieren. Ab der Version 7 wurde diese Eigenschaft jedoch implementiert.

Jedoch gibt es einen Trick, der ein Fehlverhalten vom Internet Explorer ausnutzt, so dass min-height trotzdem angewendet werden kann:

1
2
3
4
5

/* Für alle anderen Browser */
min-height:400px;
height:auto !important; /* Hierdurch wird height nicht überschrieben, der IE 6 interpretiert dies nicht */
/* Für IE 6 */
height:400px;

Beispiel

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

<style type="text/css">
    div {
        border:1px #000 solid;
        width:150px;
        margin:0.2em;
        float:left;
    }
</style>
<div style="min-height:600px;">
    Dieses Element hat eine Mindesthöhe von 600px, die hier aber nicht erreicht werden.
</div>
<div style="min-height:200px;">
    Nach erreichen der Mindesthöhe wird das Element so weit wie nötig gestreckt. Dies kann jedoch durch die Angabe einer Maximalhöhe unterbunden werden, wenn gewünscht.
</div>
<div style="border-color:#F00; height:200px;">
    Zum Vergleich: Dieses Element ist wirklich 200px groß.
</div>

Weiterführende Links

• Maximalhöhe
• Höhe

Kommentare: min-height: Minimalhöhe

Neuen Kommentar schreiben

Min-Height im IE6 ohne expression

Beantworten

Ein "fast Hack" für den IE6 ohne expression, sodass auch Min-Height/Width und Max-Height/Width ohne Probleme funktioniert: http://brainof-dave.blogspot.com/2007/12/min-height-fast-hack-ie6-sucks.html

bartrail am 09.10.2008 um 14:28