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

Как прижать футер к низу страницы

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

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


Как прижать футер к низу страницы.

Прижать футер при верстке на flex

Для примера создадим HTML страницу с классической структурой:

  • общий контейнер container
  • шапка header
  • контент в центральной части main
  • подвал footer
<div class="container">
  <header class="header">Header</header>
  <main class="content">
    <h1 class="title">Липкий футер</h1>
      <div class="text">
        <p>text text text</p>
      </div>
  </main>
  <footer class="footer">Footer Bottom</footer>
</div>

Пропишем CSS правила:

.container {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.content {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 20px;
}

.footer {
    margin-top: auto;
}

Какие CSS свойства прижмут футер к низу?

Зададим минимальную высоту у контейнера 100vh, при увеличении контента, этот блок будет вытягиваться в длину. Указав блоку footer свойство margin-top: auto, позволим браузеру автоматически вычислять верхний отступ, пока он не дойдет до низа контейнера.



Первый способ

.container {
    ...
    min-height: 100vh;
}

.footer {
    margin-top: auto;
}

Второй способ

Блок content является flex-элементом flex-контейнера container и у него есть свойство flex-grow (жадность), которое по умолчанию равно 0. Если контенту задать flex-grow: 1, то он займет все пространство родителя. Тогда футеру будет доступно немного места внизу страницы. Именно это нам и нужно.


.content {
    ...
    min-height: 100vh;
    flex-grow: 1;
}
Как прижать футер к низу страницы.

Как прижать футер на Bootstrap

Добавьте специальный класс mt-auto.

<footer class="footer mt-auto"></footer>

Посмотрите демо на CodePen