Рассмотрим старый, известный рецепт прижатия футера к низу страницы минусовыми отступами, это удобно, просто и главное — красиво.
Хочу предложить несколько нестандартную трактовку старого рецепта, с небольшим включением 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% $('body > FOOTER').css('marginTop', needFooterMarginTop) $('body > FOOTER').css('paddingBottom', needFooterPaddingBottom) } } $(window).resize(setFooterPosition()) setFooterPosition() }) </script> </body> </html> Скрипт на странице вычисляет свободное место. 20% он делает отступом между контентом и футером, а остальные 80% добавляет в высоту футера, если свободного места нет — оставляет стандартную высоту футера.
Варьировать это можно самыми немыслимыми способами, вплоть до того что можно создать несколько футером под разную высоту, и не только футеры. С ув. автор топика, надеюсь материал вам пригодится.
ссылка на оригинал статьи http://habrahabr.ru/post/178241/
Добавить комментарий