Здравствуй хабр!
Рассмотрим старый, известный рецепт прижатия футера к низу страницы минусовыми отступами, это удобно, просто и главное — красиво.
Хочу предложить несколько нестандартную трактовку старого рецепта, с небольшим включением jQuery, просто еще один взгляд на привычные вещи, прошу заинтересовавшимся под кат.
Для примера возьмем немного порубленную в фотошопе страницу биханки
Между футером и контентом осталось много свободного места, а если так?
Вроде лучше, теперь сделаем контента немного больше
Золотой середины нет. Или есть? О красоте сложно спорить, кому то покажется что большой футер лучше, кому то меньший лучше, давайте сделаем футер с динамической высотой.
Простая страница с кодом
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
</head>
<body>
<style>
SECTION.main, FOOTER {
width:1100px;
margin:0 auto
}
FOOTER {
height:20px;
}
</style>
<SECTION class="main">
</SECTION>
<FOOTER>
<p>я футер!
</FOOTER>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"></script>')</script>
<script>
$(document).ready(function(){
function setFooterPosition()
{
var mainBlockHeight = $('SECTION.main').outerHeight(true)
var browserViewportHeight = $(window).height()
var footerBlockHeight = $('FOOTER').outerHeight(true)
var lastViewportHeight = browserViewportHeight - (mainBlockHeight + footerBlockHeight)
if(lastViewportHeight > 0)
{
var needFooterMarginTop = lastViewportHeight * 0.2 //20%
var needFooterPaddingBottom = lastViewportHeight * 0.8 //80%
$('FOOTER').css('marginTop', needFooterMarginTop)
$('FOOTER').css('paddingBottom', needFooterPaddingBottom)
}
}
$(window).resize(setFooterPosition())
setFooterPosition()
})
</script>
</body>
</html>
Скрипт на странице вычисляет свободное место. 20% он делает отступом между контентом и футером, а остальные 80% добавляет в высоту футера, если свободного места нет — оставляет стандартную высоту футера.
Варьировать это можно самыми немыслимыми способами, вплоть до того что можно создать несколько футером под разную высоту, и не только футеры. С ув. автор топика, надеюсь материал вам пригодится.
Автор: edli007
