Finde uns auf facebook.com Finde uns bei twitter Finde uns bei google+
min-height

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.

3 Antworten auf: Min-Height in allen Browsern

  1. PJoerg

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

  2. Your blog is interesting!

    Keep up the good work!

  3. Michael

    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.

Hinterlasse eine Antwort

Pflichtfelder sind mit einem * markiert.