Willkommen auf Webmasterpage.net!
by webmasterpage.net

Min-Height in allen Browsern

Autor: Roger    In: CSS Tipps & Tricks

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:

3 Responses to “Min-Height in allen Browsern”

  1. PJoerg Says:

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

  2. Alex Says:

    Your blog is interesting!

    Keep up the good work!

  3. Michael Says:

    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