How to make a sticky footer using flexbox in IE11?
A solution that really helped me (may not be applicable in all cases) is adding an arbitrary fixed height in pixels - the min-height overrides the fixed height so there's no cropped content. Here's a CSS example:
.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;
}
On main
, instead of flex: 1
use flex: auto
. That should be all you need.
The flex: 1
shorthand rule breaks down to:
flex-grow: 1
flex-shrink: 1
flex-basis: 0
The flex: auto
shorthand rule breaks down to:
flex-grow: 1
flex-shrink: 1
flex-basis: auto
IE has trouble parsing flex-basis: 0
.
More information:
- flex property not working in IE
IE has a min-height
bug and needs display: flex
on the flex column containers parent, in this case the html
Fiddle demo
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>