Problem with CSS Sticky Footer implementation

Question

Im having some problems getting the Sticky Footer to work on my site. If the content is smaller than the window the footer should stay at the bottom of the window and the de

Answer 1

It's great to be able to implement the sticky footer using CSS and HTML alone, but I'm not a big fan of adjusting my markup / document structure for something cosmetic.

I much prefer a JavaScript approach, no graceful degradation. If no JS, no sticky footer. I typically use jQuery to implement:

jQuery

$(window).resize(function() {

    if ($('body').height() < $(window).height()) {
        $('#footer').addClass('fixed');
    }
    else {
        $('#footer').removeClass('fixed');
    }

}).resize();

CSS

#footer.fixed { position: fixed; bottom: 0; width: 100%; }