Wie behebe ich eine Flexbox Sticky Footer In IE11

Question

Ich habe eine klebrige Fußzeile mit flexbox erstellt. Es funktioniert in allen Browsern außer IE11.

Codepen

html { 
 
    box-sizing: border-box; 
 
} 
 

 
*, *:before, *:after { 
 
    box-sizing: inherit; 
 
} 
 

 
.Page { 
 
    min-height: 100vh; 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex: 1; 
 
} 
 

 
.Page-header { 
 
    background: blue; 
 
} 
 

 
.Page-footer { 
 
    background: green; 
 
} 
 

 
.Page-body { 
 
    background: red; 
 
    flex: 1; 
 
}

<div class="Page"> 
 
    <header class="Page-header"> 
 
    HEADER 
 
    </header> 
 
    <div class="Page-body"> 
 
    BODY 
 
    </div> 
 
    <footer class="Page-footer"> 
 
    FOOTER 
 
    </footer> 
 
</div>

Warum es in IE11 zu brechen und wie kann ich es beheben?

Answer 1

Das Problem ist, dass in IE11 flexbox min-height nicht honoriert, so dass die Flexbox auf die Höhe ihres Inhalts zusammenfällt.

Sie können es beheben, indem Sie Ihre Flexbox in eine andere Flexbox, die auch flex-direction: column hat. Sie müssen auch flex: 1 auf Ihrer ursprünglichen flexbox setzen. Aus irgendeinem Grund zwingt dies die verschachtelte Flexbox, ihre min-height zu ehren.

Codepen

html { 
 
    box-sizing: border-box; 
 
} 
 

 
*, *:before, *:after { 
 
    box-sizing: inherit; 
 
} 
 

 
.Wrapper { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.Page { 
 
    min-height: 100vh; 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex: 1; 
 
} 
 

 
.Page-header { 
 
    background: blue; 
 
} 
 

 
.Page-footer { 
 
    background: green; 
 
} 
 

 
.Page-body { 
 
    background: red; 
 
    flex: 1; 
 
}

<div class="Wrapper"> 
 
    <div class="Page"> 
 
    <header class="Page-header"> 
 
     HEADER 
 
    </header> 
 
    <div class="Page-body"> 
 
     BODY 
 
    </div> 
 
    <footer class="Page-footer"> 
 
     FOOTER 
 
    </footer> 
 
    </div> 
 
</div>

Answer 2

Versuchen

flex: 1 0 auto; 

für Inhaltsblock