DEV Community

Samuel Beard
Samuel Beard

Posted on

How to Tame a Roaming Footer

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>
Enter fullscreen mode Exit fullscreen mode
.super-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.content {
    flex-grow: 1
}
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)