如何在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>

只玩的数字

有没有一种不用JavaScript就能实现这一点的方法？




Answer 1

一个真正对我有帮助的解决方案（可能不适用于所有情况）是添加一个任意的固定高度（以像素为单位）——最小高度覆盖固定高度，因此没有裁剪的内容。下面是一个CSS示例：

.fullheight {
    min-height: 100vh;
    height: 200px; /*IE 11 flexbox min-height fix*/
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    align-content: center;
}

Answer 2

在main上，用flex： 1代替flex： auto。这应该是你所需要的。

flex:1速记规则细分为：

• flex-grow:1

flex:auto速记规则细分为：

• flex-add： 1
• flex-收缩： 1
• flex基础：自动

IE在解析flex basis:0时遇到问题。

更多信息：

• flex属性在IE中不工作

Answer 3

IE有一个min height错误，需要在flex column containers父项上显示display:flex，在本例中为html

小提琴演示

像这样更新你的CSS

css lang-css prettyprint-override">*,
*: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>