如何在 IE11 中使用 flexbox 制作粘性页脚？

Question

我正在尝试使用 flexbox 进行简单设计，但我在使用 IE11 时遇到了问题。基本上，我想要一个仅在内容不够高时才贴在底部的页脚。我可以像这样使用 Chrome 执行此操作：

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

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

 <header>
  Header
</header>
<main>
  <p>Main</p>
  <p>Main</p>
  <p>Main</p>
  <p>Main</p>
  <p>Main</p>
</main>
<footer>
  Footer
</footer>

只需玩玩 <p>main</p> 的数字，看看 IE11 的错误行为。

有没有办法在没有 JavaScript 的情况下实现这一目标？

原文由 ssougnez 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

IE 有一个 min-height 错误和需要 display: flex 在 flex 列容器父级上，在这种情况下 html

小提琴演示

像这样更新你的 CSS

 *,
*:after,
*:before {
  box-sizing: border-box;
}
html, body {
  margin: 0;
  display: flex;
}
body {
  flex-direction: column;
  min-height: 100vh;
}
main {
  flex-grow: 1;
}

 <header>
  Header
</header>
<main>
  <p>Main</p>
  <p>Main</p>
  <p>Main</p>
  <p>Main</p>
  <p>Main</p>
</main>
<footer>
  Footer
</footer>

原文由 Asons 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

在 main 上，而不是 flex: 1 使用 flex: auto 。这应该是你所需要的。

---

flex: 1 速记规则分解为：

• flex-grow: 1
• flex-shrink: 1
• flex-basis: 0

flex: auto 速记规则分解为：

• flex-grow: 1
• flex-shrink: 1
• flex-basis: auto

IE 无法解析 flex-basis: 0 。

更多信息：

• flex 属性在 IE 中不起作用

原文由 Michael Benjamin 发布，翻译遵循 CC BY-SA 3.0 许可协议