Footer below content, but not floating mid-air if not enough content

Question

If the height of the footer is unknown, it’s best to use flex, something in the lines of:

<body>
    <header></header>
    <div class="content"></div>
    <footer></footer>
</body>

And for CSS only this is needed:

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

And you don’t need to set display:flex to body, it can be a wrapper inside the body too.

Keep in mind this might not work as expected on IE (see CanIUse link below). It works pretty good for most now though!

CanIUse link
See this link for an example.