Fixed height footer

If the footer has a fixed height, the solution is simple.

We apply “position: relative” to the html tag and then “position: absolute” to the footer element, so we get the control of it. Some great explanations on this position technique you can find here

html {
  position: relative;
  min-height: 100%;
}

.footer-container {
  position: absolute;
  bottom: 0;
  left: 0;
}

To prevent the content overlapping the footer, we are adding “margin-bottom”, which is equal to the footer height, to the body tag.

body {
  margin-bottom: 28px; // equal to the footer height
}

Dynamic footer

While creating responsive sites, sometimes we face the problem that the footer height changes for different devices. In this case we should use media queries to apply different “margin-bottom” for various devices

@media (max-width: 767px) {
  body {
    margin-bottom: 50px;
  }
}

@media (min-width: 768px) {
  body {
    margin-bottom: 28px;
  }
}

or write some JavaScript code that will automatically update “margin-bottom” on the body tag. Please note that I’m using jQuery in my example

function setBodyMarginBottom() {
  // get the footer height including padding and border
  var footerHeight = $('.footer-container').outerHeight();

  $('body').css('margin-bottom', footerHeight + 'px');
}

$(function () {
  // set margin-bottom on document load
  setBodyMarginBottom();

  // every time the window is resized
  // recalculate the footer height
  $(window).resize(setBodyMarginBottom);
});

The example and full code

If you have any thoughts, just let me know.

Thank you for your time!