CSS sticky footer | Footer without a fixed height

Question

I have implemented the sticky footer many times from http://www.cssstickyfooter.com/. The only problem is that the footer has a fixed height. Is there a pure CSS solution to allow the footer to grow based on the content inside?

A JS solution wouldn't be bad, but CSS would be best.

Thanks in advance for the help.

Answer 1

Updated Answer

The original answer is over five years old, and fails in that the padding is not updated in the event the footer height is increased, or decreased. You could bind to the resize event of the window, and call this on every fire, but that would be a bit excessive.

I would instead encourage you to bind to the window.onresize event, but throttle the logic such that we aren't computing styles, thrashing the DOM, and causing layouts dozens of times per second:

(function () {

    "use strict";

    var body = document.querySelector( "body" );
    var footer = document.querySelector( "footer" );

    window.addEventListener(
        // Throttle logic: http://jsfiddle.net/jonathansampson/7b0neb6p/
        "resize", throttle( adjustContainerPadding(), 500 )
    );

    function adjustContainerPadding () {
        body.style.paddingBottom = window.getComputedStyle( footer ).height;
        return adjustContainerPadding;
    }

}());

When the page loads, we immediately fire the adjustContainerPadding method. This method sets the paddingBottom of the body to match the computed height of the footer. Note here that the window.getComputedStyle method requires IE9 or greater.

Fiddle: http://jsfiddle.net/jonathansampson/7b0neb6p/

---

Original Answer

I would encourage you (for simplicity) to just use the cssstickyfooter code, and set the css values via javascript (jQuery code follows).

$(function(){
  var footerHeight = $("#footer").height();
  $("#main").css("padding-bottom", footerHeight);
  $("#footer").css("margin-top", -footerHeight);
});

code is untested, but should work just fine

No matter how much content you have in your footer, this will automatically reset the CSS values for you.