如何在IE11中使用flexbox制作页脚? [英] How to make a sticky footer using flexbox in IE11?

问题描述

我正在尝试使用flexbox做一个简单的设计，但是在IE11上遇到了麻烦.基本上，我希望页脚仅在内容不够高时才停留在底部.我在使用Chrome这样的操作时没有问题:

I'm trying to make a simple design with flexbox but I'm having trouble with IE11. Basically, I want a footer that sticks to the bottom only if the content is not high enough. I have no issue doing that with Chrome like this:

*,
*: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的错误行为.

Just play with the number of <p>main</p> to see the wrong behaviour with IE11.

没有JavaScript可以实现这一目标吗?

Is there a way to achieve this without JavaScript?

推荐答案

IE有一个min-height错误，并且在弹性列容器父项上需要display: flex，在这种情况下为html

IE has a min-height bug and needs display: flex on the flex column containers parent, in this case the html

小提琴演示

像这样更新您的CSS

Update your CSS like this

*,
*: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>

这篇关于如何在IE11中使用flexbox制作页脚?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！