Нажмите нижний колонтитул внизу, когда страница не заполнена

Я разрабатываю мобильное веб-приложение. Это основная структура сверху вниз: заголовок div, div меню, div div, нижний колонтитул. Заголовок, меню и нижний колонтитул постоянны, а страницы загружаются в div содержимого с помощью ajax.

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

Этого я хочу достичь: если страница не заполнена содержимым, нижний колонтитул будет внизу страницы. Если страница заполнена и требуется прокрутка, нижний колонтитул будет сразу после содержимого (так что вы прокрутите страницу вниз и, в конце концов, достигнете нижнего колонтитула).

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

Так или иначе, чтобы достичь этого? Благодарю.

Ответ 1

Затем вам нужно использовать javascript для этого - рассчитать высоту содержимого - вычесть его из высоты окна и установить верхний край нижнего колонтитула с этого расстояния:

HTML

<div id="header" class="header">Header</div>
<div id="content" class="content">Content</div>
<div id="footer" class="footer">Footer</div>

JS (В этом примере используется jQuery, он должен быть включен перед этим скриптом.)

$('#footer').css('margin-top',
  $(document).height() 
  - ( $('#header').height() + $('#content').height() ) 
  - $('#footer').height()
);

Вы можете поместить окно onresize, которое вызывает эту функцию при любом изменении размера окна.

[edit blag:]

Вот метод onResize (но с min-height а не с margin-top)

Проверьте JSFiddle

 // function to set the height on fly
 function autoHeight() {
   $('#content').css('min-height', 0);
   $('#content').css('min-height', (
     $(document).height() 
     - $('#header').height() 
     - $('#footer').height()
   ));
 }

 // onDocumentReady function bind
 $(document).ready(function() {
   autoHeight();
 });

 // onResize bind of the function
 $(window).resize(function() {
   autoHeight();
 });

Границы, отступы и поля

Если вы хотите иметь границы и дополнения, включенные в расчет, вы можете использовать outerHeight() вместо height(). Альтернативно outerHeight(true) также включает поля.

Ответ 2

CSS Sticky footer должен решить вашу проблему.

Вот пример

Это очень просто настроить и использовать. Это заставит нижний колонтитул сбрасывать страницу с содержимым, и если содержимое недостаточно велико, чтобы заполнить страницу, оно будет придерживаться нижней.

Ответ 3

    function autoHeight() {
        var h = $(document).height() - $('body').height();
        if (h > 0) {
            $('#footer').css({
                marginTop: h
            });
        }
    }
    $(window).on('load', autoHeight);

Ответ 4

Это решение сработало для меня. Я думаю, что это идеально, если у вас больше, чем только #header и #footer. Он просто подталкивает контент вниз с помощью нижней части, если тело меньше, чем область просмотра.

function autoHeight() {
    var bodyHeight = $("body").height();
    var vwptHeight = $(window).height();
    var gap = vwptHeight - bodyHeight;
    if (vwptHeight > bodyHeight) {
        $("#content").css( "padding-bottom" , gap );
    } else {
        $("#content").css( "padding-bottom" , "0" );
    }
}
$(document).ready(function() {
    autoHeight();
});
$(window).resize(function() {
    autoHeight();   
});

Ответ 5

Следующее решение работает для меня, основываясь на ответе Александра Михайлова. Он находит нижний колонтитул и определяет, меньше ли он высоты документа, и использует верхнее поле в нижнем колонтитуле, чтобы восполнить недостаток. Это решение может вызвать проблемы, если размер вашего контента изменяется на ходу.

$(function () {
    updateFooterPosition();
});

$(window).resize(function () {
    updateFooterPosition();
});

function updateFooterPosition() {
    var bottomOfFooter = $('footer').offset().top + $('footer').outerHeight(true);
    var heightShortage = $(document).height() - bottomOfFooter;
    if (heightShortage < 0) heightShortage = 0;
    $('footer').css('margin-top', heightShortage);
}