Sticky Footers that move down when dynamic content gets loaded

I've been using this snippet of jQuery to get a sticky footer:

if($(document.body).height() < $(window).height()){
        $("#footer").css({
            position: "absolute",
            top:  ( $(window).scrollTop() + $(window).height()
                  - $("#footer").height() ) + "px",
            width: "100%"
       });
}
$(window).scroll(positionFooter).resize(positionFooter);

However, that breaks when I've got expandable/collapsible divs lying around where the or开发者_运维百科iginal content was less high than the window, since it is then stuck to the bottom of the window, rather than the bottom of the document.

Is there a way of fixing this, or a better way of doing it?

Please bear in mind that I don't have much control over the HTML, since I need to do this in Django's admin interface, which doesn't allow much injection of HTML in the places you might want to to accomplish this sort of thing (i.e. this answer and this answer don't work for me).

So you don't want to position the footer absolutely anymore when the document height is higher than the window height? Then add an else statement which does exactly that:

if($(document.body).height() < $(window).height()){
    $('#footer').css({
        position: 'absolute',
        top:  ( $(window).scrollTop() + $(window).height()
              - $("#footer").height() ) + "px",
        width: "100%"
    });
} else {
    $('#footer').css({
        position: 'static'
    });
}   

Here's a live demo. Note that I added click event to $(window) because the resize doesn't get triggered in FF when you expand/collapse a div.

I used this approach to sticky footers and dynamic content (but my application was slightly more complicated to integrate than the examples) and it works: http://www.cssstickyfooter.com/

I know I'm way late to the party, but I encountered a similar problem with both my AJAX comments and post/portfolio tag filters just recently. Google led me here, and the accepted answer inspired my first example below.

I set my sticky footer logic to fire for both document ready and window resize:

$(document).ready(function() {
  stickyFooter();
});
$(window).on('resize', function() {
  stickyFooter();
});

For my dynamic content, I can simply trigger a resize within the DOM-height-modifying function e.g.:

function dynamicFunctionOne() {
  /* DOM-height-modifying logic here */

  $(window).trigger('resize');
}

dynamicFunctionOne();

In another case I call my sticky footer function as a callback of another DOM-height-modifying function.

function dynamicFunctionTwo(callback) {
  /* DOM-height-modifying logic here */

  callback();
}

dynamicFunctionTwo(stickyFooter);

With either implementation, there's no need to listen for an event on every click that occurs to set the sticky footer's position.