Force Footer to the Bottom of the Page the Simple Way

I’ve frequently ran into an issue with footers on web pages where there is not enough content to push the footer to the bottom of the screen, or below it. What you get is a footer sitting in the middle of your page, and it just looks bad.

It’s easy to give the footer a fixed position, which will solve the problem on pages that don’t have enough content. The issue I have with this is that the footer is then always visible, which looks bad on pages with more content.

So what we want to do is push the footer to the bottom of the page only if the height of our page content is less than the height of the display.

When you do a search, you’ll get tons of answers on how to do this with jQuery or a bunch of CSS rules. I found that most of the solutions seemed overly complex for what seems like a simple problem. I finally found one solution that fixes the problem with only two lines of CSS.

The HTML

First wrap all of your main content in a div element and give it a class of “wrapper” (or call it whatever you want).

<body>
    <div class="wrapper">
        <h1>Main Content</h1>
    </div>
    <footer>
        <p>Footer Content</p>
    </footer>
</body>

The CSS

Now, make sure you give your footer a height.

Then use the calc() function to set the height of your wrapper equal to the height of the viewport (display), minus the height of the footer.

.wrapper {
    min-height: calc(100vh - 50px);
}
footer {
    height: 50px;
}

Now, if you have extra margins on your wrapper content you will have to increase the amount of pixels you subtract from the viewport height to reflect that. Other than that, this is a super easy and quick fix. No javascript needed, and only two CSS rules.