Вы пытаетесь прижать этот надоедливый футер к нижней части страницы? Не волнуйтесь! Это руководство покажет вам, как использовать flexbox, чтобы вернуть футер на свое место. Так что читайте до конца!

В данной статьей мы разберем как легко прижать футер к низу страницы, чтобы под ним не оставалось лишнее пространство. Для этого будем использовать технологию FlexBox и его ключевое свойство flex-grow. Более подробно про flexbox можете почитать в этой статье на моем сайте.

Разметка

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

<header class="header">
  <div class="container">HEADER</div>
</header>
<main class="main">
  <div class="container">CONTENT</div>
</main>
<footer class="footer">
  <div class="container">FOOTER</div>
</footer>

Стили

Теперь давайте прижмем футер к низу — для этого понадобиться добавить кое-какие стили.

html {
  height: 100%;
}

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

header {
  flex: 0 0 auto;
}

main {
  flex: 1 0 auto;
}

footer {
  flex: 0 0 auto;
}

Здесь мы делаем все элементы внутри body — flex-элементами и располагаем их в колонку. Далее для main задаем свойство flex-grow равным единице (в сокращенном свойстве flex). Таким образом контент растягивается на все оставшееся пространство, а футер прижимается к низу.