Wie Flexbox anpassen für ältere Browser?

  • 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:



    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?

  • 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:


    HTML
    1. <body>
    2. <div class="main">
    3. gesamter Inhalt...
    4. </div>
    5. <div class="footer">
    6. Footer
    7. </div>
    8. </body>