Небольшая хитрость всем известного футера

Рассмотрим старый, известный рецепт прижатия футера к низу страницы минусовыми отступами, это удобно, просто и главное — красиво.
Хочу предложить несколько нестандартную трактовку старого рецепта, с небольшим включением 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> <!--<![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% добавляет в высоту футера, если свободного места нет — оставляет стандартную высоту футера.

Варьировать это можно самыми немыслимыми способами, вплоть до того что можно создать несколько футером под разную высоту, и не только футеры. С ув. автор топика, надеюсь материал вам пригодится.

Related Posts