Push footer внизу, когда страница не заполнена

Question

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

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

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

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

Есть ли все равно для достижения этого? Благодарю.

Answer 1

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

• jsfiddle
• jsfiddle show

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 окно, которое называют эту функцию на любом изменении размеров окна.

[править грабить:]

Здесь OnResize метод (но с min-height и не margin-top)

Check the 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) также включает поля.

Answer 2

CSS Липкий нижний колонтитул должен решить вашу проблему.

Here's an example

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

Answer 3

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

Answer 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(); 
});