CSS Question

Footer always on bottom with "flexbox" (Issue on IE 11)

Im testing some features of the flexbox. So, i tried to put the footer of the web on the bottom with flex.

This is the test, and code (Test it With IE to see the issue):
http://codepen.io/spiderwpc/pen/zxZMjv

The html:

<body>
<header>
<h1>Header</h1>
</header>

<main>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

</main>
</body>

<footer>
<h1>Footer</h1>
</footer>


The Css:

body {
display: flex;
min-height: 100vh;
flex-direction: column;
}

main {
flex: 1 0 auto;
}

header, footer {
background: #ccc;
h1 {
padding: 10px;
margin: 0;
}
}


And works perfect with Chrome and Mozilla, but with IE 11 the footer keeps just right down of the content. And this is pissing me off.

Can you help me fix this?

Answer

Add height: 100vh; to the body-tag in your CSS.

Fiddle: http://jsfiddle.net/neh725sz/1/

Comments