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

Question

我使用flexbox创建了一个粘性页脚。它适用于除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>

为什么它在IE11中出现故障？我该如何解决？

Answer 1

尝试

flex: 1 0 auto;

用于内容块

Answer 2

问题是在IE11中，flexbox不会尊重min-height，因此弹性框会折叠到其内容的高度。

您可以通过将Flexbox包装到另一个同时具有flex-direction: column的弹散框中来修复它。您还需要在原始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 3

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

解决了它

仅在某些情况下有效，粘性页脚似乎是常见的用例之一。