如何在 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>
只需玩玩 main Just play with the number of 有没有不用 JavaScript 就能实现的方法? Is there a way to achieve this without JavaScript? IE 有一个 IE has a 像这样更新你的 CSS Update your CSS like this 这篇关于如何在 IE11 中使用 flexbox 制作粘性页脚?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!<p>main</p>
to see the wrong behaviour with IE11.推荐答案
min-height
错误,需要 display: flex
在 flex 列容器父项上,在这种情况下 html
min-height
bug and needs display: flex
on the flex column containers parent, in this case the html
*,
*: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>