Làm cách nào để sửa chữa chân trang dính Flexbox trong IE11

Question

Tôi đã tạo một chân trang dính bằng flexbox. Nó hoạt động trong tất cả các trình duyệt ngoài 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>

Tại sao nó phá vỡ trong IE11 và làm thế nào tôi có thể sửa chữa nó?

Answer 1

Vấn đề ở chỗ trong hộp thoại IE11 sẽ không tôn trọng min-height, do đó hộp flex bị sụp đổ theo chiều cao của nội dung.

Bạn có thể sửa chữa nó bằng cách gói flexbox của bạn bên trong một flexbox khác cũng có flex-direction: column. Bạn cũng cần phải đặt flex: 1 trên hộp Flexbox gốc của mình. Đối với một số lý do này buộc các flexbox lồng nhau để tôn vinh bất kỳ min-height của nó.

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

Hãy thử

flex: 1 0 auto; 

cho khối nội dung