Min-Height in allen Browsern

Min-Height wird in CSS recht häufig benötigt. Jedoch kennt der Internet Explorer in der Version 6 und abwärts die Eigenschaft min-height nicht. Aber es gibt Abhilfe.

Zunächst benutzen wir in der Klasse die Eigenschaft min-height für moderne Browser.

.min-height-klasse
{
min-height: 100px;
}

Anschließend fügen wir für ältere Browser eine Fixe Höhe ein.

.min-height-klasse
{
min-height: 100px;
height: auto !important;
height: 100px;
}

Aber wozu jetzt eine Höhenangabe eingeben und die Höhe automatisch anpassen lassen? Ganz einfach durch das !important, steigt die Gewichtung für die Eigenschaft height: auto;. Aber der Browser versucht auch die Höhe von 100px zu erreichen. Also erhält das Element erst eine Höhe von 100px und sollte diese überschritten werden, wirkt die Zuweisung auto.

Verwandte Beiträge:

• Geschwindigkeits-Wahn im WWWeb2.0
• Google’s Chrome ohne Google mit nicht weniger Chrome
• CSS Tab Navigation Generator - List-O-Matic
• Bundesamt warnt vor Nutzung von Googles Chrome
• Whois-API.com - API mit vielen Funktionen

3 Responses to “Min-Height in allen Browsern”

1. PJoerg Says:
   Juni 12th, 2008 at 12:51

   hallo und danke, genau das habe ich gesucht. funktioniert perfekt.

2. Alex Says:
   August 17th, 2008 at 06:46

   Your blog is interesting!

   Keep up the good work!

3. Michael Says:
   Januar 12th, 2010 at 05:21

   Funktioniert leider nicht mehr, wenn ich das kaskadierend mache.

   Wenn ich diese Klasse auf zwei ineinander verschachtelte Klassen anwende, dann macht die Äußere alles richtig, die innere aber leider nicht mehr.

   Ob’s daran liegt, weil ich mit % arbeite?

   {
   min-height: 100%;
   height: auto !important;
   height: 1000px;
   }

   Der Äussere DIV soll einen Schatteneffekt rechts und links erzeugen, der innere den eigentlichen Hintergrund. Der Schatten funktioniert, der innere DIV macht aber nicht mehr was ich von ihm erwartete.

Kommentare