How to Tame a Roaming Footer

#tutorial #css #design

Don't you hate it when you don't have enough content on a web page and the footer just hangs there. Directly under said content. Half way up the screen - nowhere near the bottom.

Here is a quick and simple way of making sure the footer sticks to the bottom of the screen when there isn't enough content to push it down there.

<div class="super-container">
    <div class="navbar"></div>
    <div class="content"></div>
    <div class="footer"></div>
</div>

.super-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.content {
    flex-grow: 1
}

You can put all the css from the .super-container into the body if you don't want the extra div.

So this will make your content section grow to push the footer to the bottom on the screen nicely. And if the content goes past the fold, it will all work as usual.