Blog: Web Design
Gum stuck to bottom of shoe

Create A CSS Sticky Footer

Avatar for John Locke

John Locke is a SEO consultant from Sacramento, CA. He helps manufacturing businesses rank higher through his web agency, Lockedown Design & SEO.

What is a sticky footer? And why would you need one?

As you may already know, the footer is the area at the bottom of a web page. This area usually contains copyright information, social media and other links, and sometimes contact information.

The problem is that occasionally, your site may have pages where the main content of the page doens’t take up enough room to push the footer to the bottom of the screen.

This phenomenon occurs more frequently on large monitors, but it can occur on smaller screens as well.

This tutorial will show the developers in the house how to implement a sticky footer that always appears at the bottom of the screen, no matter how little content appears in the main part of the page.

The Code

Here’s the basic HTML and specific CSS we’ll use to make the footer “stick” to the bottom of the page.

Please note: If you’re using flat HTML files or compiling to HTML, this part will be easier. If you’re working with a WordPress child theme, or even a starter theme like _s (Underscores), you’ll have to alter some of the HTML in the footer.php file. Most WordPress themes nest the footer element within some sort of page-wrapping div.


<!--HTML-->
<html>
<body>
    <header>
        <!--Header stuff goes here-->
    </header>

    <div class="site">
        <!--Page content goes here-->
    </div>

    <footer class="site-footer">
        <!--Footer stuff goes here-->
    </footer>
</body>
</html>


/* CSS */
* {
  margin: 0;
}
html, body {
  height: 100%;
}
.site {
  min-height: 100%;
  height: auto !important; /* For IE6 support */
  height: 100%; /* For IE6 support */
  margin-bottom: -100px; /* This number must be equal to the height of the footer (only negative). */
}
.site::after {
  content: "";
  display: block;
}
.site-footer, .site::after {
  height: 100px; 
}

What We’re Doing In The Code

In many sites, the footer sits inside a div or other element that “wraps” the page elements together, or it just resides within the body element, and where it ends up on the screen is determined by the page content that proceeds it.

What we’ve done here is take the footer out of that automatic flow, and make a rule that says the page content should always be at least as tall as the screen we’re viewing it on.

If we know exactly how tall the footer will be at a given screen width, we can then create space for it after the normal page content. If we skip this step, our footer will look out of alignment, as the page elements will try to flow like water to where they are allowed to go.

The .site div “clears” the next element, the footer, and the negative margin makes space for the fixed height footer.

Avatar for John Locke

John Locke is a SEO consultant from Sacramento, CA. He helps manufacturing businesses rank higher through his web agency, Lockedown Design & SEO.

Join the Conversation

Your email address will be kept private. Required fields marked *.