Flexbox,最小高度和IE11

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的情况下实现这一目标？

Answer 1

IE有一个min-heightbug和需要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>

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中不起作用

Answer 3

确实对我有帮助（可能并非在所有情况下都适用）的解决方案是添加一个以像素为单位的任意固定高度-min-height会覆盖固定高度，因此没有裁剪的内容。这是一个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;
}