Wie Flexbox anpassen für ältere Browser?

Amon · 19. Februar 2019

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:

CSS

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

HTML

<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?

Amon · 20. Februar 2019

Mit kleinen Anpassungen und mittels Hilfe von diesem Autoprefixer hab ich es für Webkit hinbekommen.

Nur im IE klappt es leider noch nicht .

Dort scheint sich main nicht um den verfügbaren ungenutzten Platz zu vergrößern und der Footer sitzt direkt darunter und nicht am unteren Bildschirmrand.

Warum?

Das ist mein aktueller Code:

CSS

body {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
min-height: 100vh;
margin: 0 auto;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
font-size: 1em;
font-family: Arial, sans-serif;
overflow-y:scroll;
}
.main {
-webkit-box-flex: 1;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
}
.footer {
width: 100%;
margin: 60px 0px 10px 0px;
}

Alles anzeigen

HTML

<body>
<div class="main">
gesamter Inhalt...
</div>
<div class="footer">
Footer
</div>
</body>

Tags