Меню
Оставить заявку

Sticky footer. Прилипающий футер

Разберем проблему с прилипающим футером.

Ссылка на codepen

Представим, что у на главной странице вашего сайта подвал внизу и все ок, но вот на странице контактов контента мало и подвал находится не внизу страницы, а посередине, как здесь:

Sticky footer. Прилипающий футер 1
Демо проблемы

Как-то я делал javascript реализацию подсчета высот и автоматическую подстройку, но постоянно возникали проблемы с отступами и я решил, что это необходимо сделать на css.

Решать проблему будем с помощью flex grid.

html

Для начала создадим html-код, тут нам понадобиться всего 2 элемента: content и footer. В content будет лежать шапка и контент сайта, отдельно будет футер.

<body>
   <div class="content">
      <p>I am content</p>
   </div>
   <div class="footer">
      <p>I am footer</p>
   </div>
</body>

CSS

body,html {
   height: 100%;
}

body {
   display: flex;
   flex-direction: column;
}

.content {
   flex: 1 0 auto;
}

.footer {
   flex-shrink: 0;
}

Здесь в несколько шагов:

Делаем body, html высоту в 100%, так как при отсутствии контента они не заполняют высоту экрана.

Для body установим flex и направление column, так как нам нужно, чтобы они выстроились в столбик.

Для content укажем flex: 1 0 auto, что дословно:

  • flex-grow: 1;
  • flex-shrink: 0;
  • flex-basis: auto

Нам нужно, чтобы он мог расширяться (grow), но нельзя, чтобы он изменял высоту меньше собственной (shrink), и размер автоматический (auto).

Подвалу мы запрещаем изменять высоту меньше собственной (shrink).

Готово, проверяем:

Sticky footer. Прилипающий футер 2
Демонстрация

sticky footer

Спасибо за прочтение статьи!

Если материал был полезен для тебя — напиши «спасибо» в комментариях, это займет 30 секунд. Сделаешь приятно 🙂 Спасибо!

Если у тебя есть замечания, пожелания, предложения — можешь так же написать их в комментариях. Я рад новым мнениям и критике.

Похожие статьи

Анимация элементов при прокрутке
Добавление типографа на сайт
Именование в БЭМ
Модальные окна на javascript. 30 строк кода

Поделиться
Отправить

Есть заказ, но не времени?

Получи деньги за работу, которую выполню я

Все по честному! Ты передаешь мне заказ, и с оплаты заказа получаешь кэшбек 15%.

Я работаю по такой же схеме: я могу передавать тебе заказы за 15% кэшбэка. Выгоднее обмениваться заказами, а не терять их. Мои партнеры заработали с моими заказами более 100 000 рублей.

Переходи на страницу контакты и напиши туда, где удобнее будет общаться.

Обсудить партнерство

Комментарии