← Назад в «Блог»
1 807

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;
}

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

  1. Делаем body, html высоту в 100%, так как при отсутствии контента они не заполняют высоту экрана.
  2. Для body установим flex и направление column, так как нам нужно, чтобы они выстроились в столбик.
  3. Для content укажем flex: 1 0 auto, что дословно:
    — flex-grow: 1;
    — flex-shrink: 0;
    — flex-basis: auto
  4. Подвалу мы запрещаем изменять высоту меньше собственной (shrink).

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

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

Таким образом контент, даже при недостатке контента будет выталкивать подвал вниз страницы.

sticky footer

Полезно
2
1
Непонятно
5
Поделиться
Отправить
Линкануть
Вотсапнуть

Подпишись на крутой канал о фрилансе

Я делюсь там фишками о фрилансе: деньги, клиенты, автоматизация, фриланс. Раньше это был закрытый материал с платным доступом. Сейчас он открыт. Иногда подписчикам будет открываться платные материалы. Подписаться

← Назад в «Блог»

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *