Лучшие статьи и кейсы стартапов
Включить уведомления
Дадим сигнал, когда появится
что-то суперстоящее.
Спасибо, не надо
Вопросы Проекты Вакансии
Коллективный блог, сервис для коллективного создания контента.
Рекомендуем
Продвинуть свой проект
Лучшие проекты за неделю
45
Битрикс24

Битрикс24

www.bitrix24.ru

15
GIFTD

GIFTD

giftd.tech

13
Aword

Aword

Приложение для изучения английских слов

12
Логомашина

Логомашина

logomachine.ru

12
Convead

Convead

convead.ru

11
Devicerra

Devicerra

devicerra.com

11
Eczo.bike

Eczo.bike

www.eczo.bike

11
Flowlu

Flowlu

flowlu.ru

10
Отследить-посылку

Отследить-посылку

отследить-посылку.рф

10
KEPLER LEADS

KEPLER LEADS

keplerleads.com

Показать следующие
Рейтинг проектов
Подписывайтесь на Спарк в Facebook

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

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

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

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

Техника

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

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

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

<body>
    <header>...</header>
    <section class="main-content">...</section>
    <footer>...</footer>
</body>

Первым делом добавим 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 вниз.

b_574c3b3629b8f.jpg

Заключение

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

-1
Комментариев еще не оставлено
Выбрать файл
Читайте далее
Загружаем…
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать