Hallo Forum,
ich brauche mal wieder eure Hilfe.
Es geht um die Abwärtskompatibilität eines Flexbox-Layouts für ältere Browser.
Konkret habe ich über das Flexbox-Modell einen Footer, der sich immer am unteren Bildschirmrand befindet, auch bei sehr wenig Hauptinhalt.
Gelöst hab ich das ganze folgendermaßen:
body {
display: flex;
min-height: 100vh;
margin: 0 auto;
flex-direction: column;
}
main {
flex: 1;
}
footer {
width: 100%;
margin: 60px 0px 10px 0px;
}
Alles anzeigen
<body>
<main>
Hier befindet sich der komplette Inhalt...
</main>
<footer>
Hier sitzt der Footer (mit 10px Abstand zum unteren Rand und 60px Abstand zum Inhalt...
</footer>
</body>
Alles anzeigen
Das Ganze funktioniert wunderbar in modernen Browsern, die das Flexbox-Modell verstehen.
Ich möchte aber natürlich auch, dass es in älteren Browsern funktioniert.
Ich habe schon herausgefunden, dass es dafür z.B. ms-flex oder webkit-flex Präfixe gibt.
Nur weiß ich leider nicht, wie die genaue Syntax auszusehen hat. Ich habe schon alles mögliche probiert.
Es klappt einfach nicht bei mir.
Scheinbar spielt wohl auch die richtige Reihenfolge bei der Deklaration eine Rolle.
Kann mir da jemand auf die Sprünge helfen?