Прижатий підвал, 5 способів

Крис Койер

Оригінал: css-tricks.com/couple-takes-sticky-footer
Переклад: Влад Мержевич

Коротка історія, якщо хочете.

Суть прикріпленого підвалу полягає в тому, що він «прилипає» до нижньої частини вікна браузера. Проте не завжди; якщо на сторінці достатньо вмісту, щоб зсунути підвал вниз, то це буде зроблено. Якщо вмісту на сторінці мало, тоді підвал прилипне до нижньої частини вікна браузера.

Спосіб 1. Використання від'ємного margin-bottom для обгортки

Ми використовуємо елемент .wrapper, в який поміщаємо все, крім підвалу. Потім встановлюємо для обгортки від'ємний margin-bottom, рівний висоті підвалу.

Приклад 1. Використання від'ємного margin-bottom

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Підвал</title>
  <style>
   html, body {
    height: 100%;
    margin: 0;
   }
   .wrapper {
    min-height: 100%;
    margin-bottom: -50px;
   }
   .footer,
   .push {
    height: 50px;
   }
  </style>
 </head>
 <body>
  <div class="wrapper">
   Вміст
   <div class="push"></div>
  </div>
  <footer class="footer">Підвал</footer>
 </body>
</html>

Потрібно також додатковий елемент всередині області вмісту (.push), він гарантує, що від'ємний margin не затягне підвал вгору і не перекриє вміст. У .push, ймовірно, немає власного від'ємного margin, тому використання зсуву обґрунтовано. Якщо це не так, то потрібно врахувати значення від'ємних margin і згодить два числа, щоб виглядало добре.

Спосіб 2. Використання від'ємного margin-top у підвала

Даний метод не потребує використання елемента .push, замість цього потрібно обгорнути вміст в додатковий елемент, до якого слід застосувати відповідний padding-bottom.

Приклад 2. Використання від'ємного margin-top

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Підвал</title>
  <style>
   html, body {
    height: 100%;
    margin: 0;
   }
   .content {
    min-height: 100%;
   }
   .content-inside {
    padding: 20px;
    padding-bottom: 50px;
   }
   .footer {
    height: 50px;
    margin-top: -50px;
   }
  </style>
 </head>
 <body>
  <div class="content">
   <div class="content-inside">
    Вміст
   </div>
  </div>
  <footer class="footer">Підвал</footer>
 </body>
</html>

Обидва методи потребують додаткових зайвих елементів HTML.

Спосіб 3. Використання calc() для зменшення висоти обгортки

Один із способів не включати зайві елементи — це відрегулювати висоту обгортки за допомогою calc(). Тоді ніякого перекриття не буде, просто два елементи складуться один на одного на загальну висоту 100%.

Приклад 3. Використання calc()

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Підвал</title>
  <style>
   .content {
    min-height: calc(100vh - 70px);
   }
   .footer {
    height: 50px;
   }
  </style>
 </head>
 <body>
  <div class="content">
   Вміст
  </div>
  <footer class="footer">Підвал</footer>
 </body>
</html>

Спосіб 4. Використання флексбоксів

Велика проблема у перерахованих трьох методів полягає в тому, що вони вимагають підвала фіксованої висоти, що досить неприємно. Вміст може змінюватися. Елементи гнучкі. Фіксована висота — небезпечна територія. Використання флексбоксів для прижимання підвала не тільки не вимагатиме додаткових елементів, але й дозволить встановити підвал будь-якої висоти.

Спосіб 5. Використання Grid

Макет за допомогою Grid є більш новим (і менш підтримуваним), ніж флексбокси. У нас також є повне керівництво по ньому. Ви також може досить легко використовувати Grid для прижимання підвала.

Часті запитання