Липкие нижние колонтитулы, которые перемещаются вниз при загрузке динамического содержимого

Question

Я использовал этот фрагмент jQuery, чтобы получить липкий нижний колонтитул:

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

Однако, это ломается, когда у меня есть развертываемые / складываемые элементы div, лежащие там, где исходное содержимое было меньше, чем у окна, поскольку оно затем прилипает к нижней части окна, а не к нижней части документа. 1006 *

Есть ли способ исправить это или лучший способ сделать это?

Пожалуйста, имейте в виду, что у меня нет большого контроля над HTML, так как мне нужно сделать это в интерфейсе администратора Django, который не позволяет много внедрять HTML в местах, где вы, возможно, захотите выполнить этот вид вещи (т.е. этот ответ и этот ответ не работают для меня).

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 и фильтрами тегов записей / портфолио. Google привел меня сюда, и принятый ответ вдохновил мой первый пример ниже.

Я установил логику липкого нижнего колонтитула для готовности как документа, так и изменения размера окна:

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

Для моего динамического контента я могу просто вызвать изменение размера в функции изменения высоты DOM, например ::10000

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

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

dynamicFunctionOne();

В другом случае я вызываю функцию липкого нижнего колонтитула как обратный вызов другой функции изменения высоты DOM.

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

  callback();
}

dynamicFunctionTwo(stickyFooter);

В любой реализации нет необходимости прослушивать событие при каждом щелчке, которое происходит, чтобы установить позицию закрепленного нижнего колонтитула.