[Перевод] На заметку опытному верстальщику: Лучший способ сделать липкий футер30.05.2016 17:18

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

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

Я начну строить нашу страницу с помощью верстки адаптивных блоков. Кто еще до сих пор не знает, но начиная с 21 апреля 2015 года Гугл ввел новые методы ранжирования сайтов, в основе которого лежит адаптивный дизайн сайта. Если Ваш сайт не имеет адаптивного дизайна, Ваш ресурс будет понижаться в выдаче поисковой системы. Вот оно чудо мобильных устройств. Для тех, кто не совсем в курсе, что такое адаптивные блоки и с чем их едят, я оставлю пару ссылок в конце статьи.

Моя демонстрационная страница будет самая что ни на есть простая. Состоять он будет из трех основных частей:

• Заголовок (head);
• основной раздел (main section);
• футер (footer);

Вот вам пример html кода, ничего в нем сверхъестественного нет.

    
...
    
...
    

Первым делом добавим display: flex в body, и добавим направление направление для flex-элементов размещенных на нашей странице (по умолчанию flex-direction: row; расположение объектов слева направо для ltr, и справа налево для rtl). Кроме этого добавим height: 100%;, для того, чтобы заполнить весь экран.

html{ height: 100%; }
body{ display: flex; flex-direction: column; height: 100%; }

Теперь я задам параметры, которые будут определять, какое место будет занимать тот или иной блок на странице. Сделаю это с помощью свойства Flex. Ниже я привел ещё ряд свойств, с помощью которых можно будет задать:

• flex-grow — Определяет для flex-элемента возможность «вырастать» при необходимости
• flex-shrink — Определяет для flex-элемента возможность сжиматься при необходимости
• flex-basis — Определяет размер по умолчанию для элемента перед распределением пространства в контейнере

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

header{
   flex: 0 0 auto;
}

.main-content{
   flex: 1 0 auto;
}

footer{
   flex: 0 0 auto;
}

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

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

Я надеюсь, что Вам понравился мой способ создания простых липких футеров и что Вы нашли в этой статье что-то новое и полезное для себя. Оставляйте свои комментарии, если у вас есть свой крутой трюк с адаптивными блоками, напишите мне.

© Habrahabr.ru