如何修复 IE11 中的 Flexbox 粘性页脚

Question

我使用 flexbox 创建了一个粘性页脚。它适用于除 IE11 之外的所有浏览器。

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>

为什么它在 IE11 中崩溃，我该如何修复它？

Answer 1

问题是在 IE11 中 flexbox 不支持 min-height，因此 flex box 折叠到其内容的高度。

您可以通过将 flexbox 包装在另一个同样具有 flex-direction: column 的 flexbox 中来修复它。您还需要在原始 flexbox 上设置 flex: 1。出于某种原因，这会强制嵌套的 flexbox 遵守其任何 min-height.

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

尝试

flex: 1 0 auto;

对于内容块

Answer 3

我使用 flexbug's recommendation of changing min-height on the body to just height

解决了这个问题

仅适用于特定情况，粘性页脚似乎是常见的用例之一。

如何修复 IE11 中的 Flexbox 粘性页脚

How Do I Fix A Flexbox Sticky Footer In IE11

html

css

internet-explorer

sticky-footer

flexbox