Sticky footers that move down when dynamic content loads

Question

I used this jQuery snippet 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, this breaks down when I have expandable / compressible divs lying around where the original content was smaller than the window, because it then sticks to the bottom of the window and not to the bottom of the document.

Is there a way to fix this or is it better to do it?

Please keep in mind that I don’t have much control over HTML, since I need to do this in the Django admin interface, which doesn’t allow much HTML to be inserted into places that you might want to execute (i.e. this answer and this answer does not work for me).

Answer 1

, , , ? else, :

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'
    });
}   

. , click $(window), resize FF, / div.

Answer 2

( , ), : http://www.cssstickyfooter.com/

Answer 3

, , AJAX, post/portfolio. Google , .

:

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

DOM, :

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

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

dynamicFunctionOne();

DOM.

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

  callback();
}

dynamicFunctionTwo(stickyFooter);

, .