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

小编典典

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

css

我正在尝试使用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，有没有办法实现这一目标？

阅读 347

2020-05-16

共1个答案

小编典典

IE浏览器存在一个min-height错误，并且需要display: 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>

2020-05-16