There are a million sticky footers on the internet. Here's mine!

My criteria for a good sticky footer:

  • Minimal code necessary
  • Elegance
  • Javascript allowed but only in minimal quantities
  • Nothing absolutely defined, e.g. no setting height values

First, the CSS.

  
    html {
      position: relative;
      min-height: 100%;
    }
    body {
      margin: 0;
    }
    footer {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
    }
  

Next, the Javascript. The general idea behind many sticky footers is that you create a margin-bottom for the body and then slot the footer into the gap left at the bottom of the page (i.e. the gap created by the margin between the bottom of the body and the bottom of the html tags).

  
    // Dynamically set bottom margin of body for sticky footer

    // Get height of the footer and set the bottom margin to the same height
    function stickyFooter() {
      var bodyBottomMargin = $( ".site-footer" ).outerHeight();
      $("body").css("margin-bottom", bodyBottomMargin);
    }

    // Set bottom margin of body
    stickyFooter();

    // If the footer height changes when the window is resized, make sure we handle it
    $( window ).resize(function() {
      stickyFooter();
    });

  

Notice that we use outerHeight() rather than height() to get the height of the footer. This is so that we include the padding and borders of the footer. Over to you! Enjoy.

Shoutout to mystrd.at for the inspiration.