CSS: Creating Sticky Footer on a Website

Regardless of how much content your website has, it is always good to keep your footer stick to the bottom of browser's window. Normally when there is not enough content, footer will position itself after the last element. Let me show you how to approach this problem with CSS only and always push your footer to the very bottom of a window.

What is the issue?

The problem usually occurs only when there's not enought content to fill up the entire browser window. In this case your footer (which is usually the last element before closing </body> tag), will stick to the top, straigth after the last element.

Take a look at the following example.

As the screenshot depicts, there is not enough content to push the footer to the very bottom of the window.

Below is the animation of the problem.

As you see, the footer remains static after the main block of text and does not move as we resize the window.
How to fix this?

There is multitude of ways how to fix this. In this article I will focus only on the plain CSS ones. We won't need any JavaScript at all. The first way is rather old and requires more markup as well as styling (it has additional drawbacks I will talk about later), the second approach is modern, uses CSS Flexbox and requires less code than the first example.

Non-flexbox solution

This solution is was popular when browser support for Flexbox was low or none. Let's see both markup as well as the styles.

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Sticky Footer</title>
    <style>
        html,
        body {
            height: calc(100% - 50px); /** subtract footer's height */
        }

        body {
            background-color: #dadada;
            color: #000000;
            font-family: Arial, serif;
            line-height: 30px;
            margin: 0;
            padding: 50px;
        }

        #wrap {
            height: auto;
            margin: 0 auto -50px; /** negative value, equal to footer's height */
            min-height: 100%;
            position: relative;
        }

        footer {
            background-color: #ff453a;
            bottom: 0;
            height: 50px;
            padding: 10px;
            position: relative;
            width: 100%;
        }

        .break {
            clear: both;
        }

        .push {
            height: 50px; /** same as footer's height */
        }
    </style>
</head>

<body>

<section id="wrap">
    <main>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dapibus urna in feugiat iaculis. Nunc nec mattis
            ante, in consectetur sem. Ut sollicitudin nibh sapien, in volutpat nunc luctus sit amet. Nulla ornare eleifend
            facilisis. Donec nisl est, tincidunt vitae nulla quis, tempor congue ipsum. Interdum et malesuada fames ac ante
            ipsum primis in faucibus. Fusce imperdiet leo ac ante rhoncus, in pulvinar sapien dignissim. Donec fringilla dui
            quis egestas auctor. Integer tincidunt eros ac fermentum sollicitudin. Maecenas maximus tincidunt malesuada.
            Phasellus vel urna non quam viverra interdum ut id sem. Pellentesque sit amet fermentum sem. Nullam a nibh eu
            massa semper dignissim scelerisque sit amet tortor.
        </p>

        <p>
            Cras a dui vitae quam pretium consectetur et sit amet mi. Sed vestibulum leo ante, sit amet venenatis ex iaculis
            eu. Etiam rhoncus nisi vel mauris venenatis, malesuada faucibus nulla iaculis. Proin maximus lacinia quam in
            tincidunt. Nulla laoreet dolor et tortor dignissim, ut varius odio hendrerit. Cras a ipsum eu est euismod
            suscipit et id dui. Ut vehicula neque a ex malesuada, non commodo nulla tempor. Etiam non orci metus.
        </p>

        <p>
            Vivamus ultrices magna sed sodales sollicitudin. Fusce id magna a felis pharetra semper eu vel neque. Duis
            interdum risus id urna bibendum venenatis. Integer varius enim vitae orci sagittis accumsan. Mauris tempus odio
            felis, eu convallis nulla tristique a. Vivamus elementum velit et orci mattis pulvinar. Nulla interdum ipsum
            vitae suscipit rutrum. Donec quis ante mollis, ultrices massa sed, condimentum tellus. Nullam a lacus volutpat,
            accumsan dolor sit amet, varius sapien. Integer rutrum metus gravida efficitur scelerisque. Curabitur
            sollicitudin, magna et molestie porttitor, mi dolor tincidunt nisl, eget cursus est dolor sit amet quam. Vivamus
            vehicula ipsum vel diam dignissim venenatis id quis ex. In hac habitasse platea dictumst. Sed convallis sapien
            sapien, eget tempus ligula luctus quis. Ut ut elit a arcu euismod sollicitudin. Class aptent taciti sociosqu ad
            litora torquent per conubia nostra, per inceptos himenaeos.
        </p>

        <p>
            Mauris maximus eu sem a sodales. Curabitur non ex in eros porta pellentesque. Praesent ultricies viverra tellus
            nec convallis. Morbi sed luctus purus, in egestas metus. Sed consectetur bibendum pretium. Nulla eget elit
            condimentum eros ornare laoreet sit amet ac nunc. Mauris malesuada dignissim scelerisque. Proin vel varius
            nulla. Aliquam erat volutpat. Nunc eget nisi fermentum turpis imperdiet vehicula. Lorem ipsum dolor sit amet,
            consectetur adipiscing elit. Ut leo nulla, placerat et lorem vel, bibendum ullamcorper neque. Duis in sem orci.
            Nulla facilisis quis felis quis vulputate.
        </p>
    </main>
    <section class="break push"></section>
</section>

<footer>
    <p>Footer</p>
</footer>
</body>
</html>

What can we see here?

  • The footer element has a fixed height, which already gives us pretty serious limitation but also it (the value) has to be referenced in more than a single place within styles.
  • We have additionanal makup with <section class="break push"></section> that is responsible for push the footer to the very bottom of the window.
  • Both main content as well as "the push" element have to be additionally wrapped with a parent that has bottom margin equal to a negative value of footer's height. This is another complication and dependency.
  • Finally the footer is defined outside of the wrapper and before closing </body>.

This solution indeed works and does the job.

Flexbox solution

Now let's take a look at solution that requires way less code.

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Sticky Footer</title>
    <style>
        html, body {
            height: 100%;
        }

        body {
            background-color: #dadada;
            box-sizing: border-box; // purely for styling to compensate the 50px of padding
            color: #000000;
            display: flex;
            flex-direction: column;
            font-family: Arial, serif;
            line-height: 30px;
            margin: 0;
            padding: 50px; // purely for styling
        }

        main {
            flex: 1 0 auto;
        }

        footer {
            background-color: #ff453a;
            flex-shrink: 0;
            padding: 10px;
            width: 100%;
        }
    </style>
</head>

<body>

<main>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dapibus urna in feugiat iaculis. Nunc nec mattis
        ante, in consectetur sem. Ut sollicitudin nibh sapien, in volutpat nunc luctus sit amet. Nulla ornare eleifend
        facilisis. Donec nisl est, tincidunt vitae nulla quis, tempor congue ipsum. Interdum et malesuada fames ac ante
        ipsum primis in faucibus. Fusce imperdiet leo ac ante rhoncus, in pulvinar sapien dignissim. Donec fringilla dui
        quis egestas auctor. Integer tincidunt eros ac fermentum sollicitudin. Maecenas maximus tincidunt malesuada.
        Phasellus vel urna non quam viverra interdum ut id sem. Pellentesque sit amet fermentum sem. Nullam a nibh eu
        massa semper dignissim scelerisque sit amet tortor.
    </p>

    <p>
        Cras a dui vitae quam pretium consectetur et sit amet mi. Sed vestibulum leo ante, sit amet venenatis ex iaculis
        eu. Etiam rhoncus nisi vel mauris venenatis, malesuada faucibus nulla iaculis. Proin maximus lacinia quam in
        tincidunt. Nulla laoreet dolor et tortor dignissim, ut varius odio hendrerit. Cras a ipsum eu est euismod
        suscipit et id dui. Ut vehicula neque a ex malesuada, non commodo nulla tempor. Etiam non orci metus.
    </p>

    <p>
        Vivamus ultrices magna sed sodales sollicitudin. Fusce id magna a felis pharetra semper eu vel neque. Duis
        interdum risus id urna bibendum venenatis. Integer varius enim vitae orci sagittis accumsan. Mauris tempus odio
        felis, eu convallis nulla tristique a. Vivamus elementum velit et orci mattis pulvinar. Nulla interdum ipsum
        vitae suscipit rutrum. Donec quis ante mollis, ultrices massa sed, condimentum tellus. Nullam a lacus volutpat,
        accumsan dolor sit amet, varius sapien. Integer rutrum metus gravida efficitur scelerisque. Curabitur
        sollicitudin, magna et molestie porttitor, mi dolor tincidunt nisl, eget cursus est dolor sit amet quam. Vivamus
        vehicula ipsum vel diam dignissim venenatis id quis ex. In hac habitasse platea dictumst. Sed convallis sapien
        sapien, eget tempus ligula luctus quis. Ut ut elit a arcu euismod sollicitudin. Class aptent taciti sociosqu ad
        litora torquent per conubia nostra, per inceptos himenaeos.
    </p>

    <p>
        Mauris maximus eu sem a sodales. Curabitur non ex in eros porta pellentesque. Praesent ultricies viverra tellus
        nec convallis. Morbi sed luctus purus, in egestas metus. Sed consectetur bibendum pretium. Nulla eget elit
        condimentum eros ornare laoreet sit amet ac nunc. Mauris malesuada dignissim scelerisque. Proin vel varius
        nulla. Aliquam erat volutpat. Nunc eget nisi fermentum turpis imperdiet vehicula. Lorem ipsum dolor sit amet,
        consectetur adipiscing elit. Ut leo nulla, placerat et lorem vel, bibendum ullamcorper neque. Duis in sem orci.
        Nulla facilisis quis felis quis vulputate.
    </p>
</main>

<footer>
    <p>Footer</p>
</footer>
</body>
</html>

In this example we can observe:

  • Either footer nor any other element has a fixed height defined.
  • We do not have any additonal wrappers, pushers or elements that clear floating.

See it in action:

Pick a solution of your choice and give your website more pleasant appearance.


Last revision 2021-11-22 23:38:50