5 способів притиснути footer до низу сторінки

27 11 2021

5 способів притиснути footer до низу сторінки

Орієнтовний час читання: 2 хвилин

Призначення футера полягає в тому, що він прилипає до нижньої частини вікна браузера. Якщо на сторінці достатньо контенту, щоб зрушити її, то так і буде. Але якщо вміст на сторінці короткий, тоді футер висітиме посередині екрана.

Ми покажемо 5 способів, як можна притиснути футер до низу сторінки на чистому css

1. Негативний margin для wrapper

Створимо два сусідні блоки wrapper та footer. Для wrapper задамо нижній мінусовий відступ дорівнює висоті футера.

HTML

<body>
  <div class="wrapper">

      content

    <div class="push"></div>
	  </div>
	  <footer class="footer"></footer>
</body>

CSS

html, body {
  height: 100%;
  margin: 0;
}
.wrapper {
  min-height: 100%;

  /* Equal to height of footer */
  /* But also accounting for potential margin-bottom of last child */
  margin-bottom: -50px;
}
.footer,
.push {
  height: 50px;
}

Для цього потрібен додатковий елемент усередині wraper (“push”), щоб гарантувати, що негативний margin не підтягне footer і не закриє будь-який контент.

2. Негативний margin для footer

Цей метод не вимагав використання елемента push, але натомість був потрібний додатковий елемент обтікання навколо вмісту, до якого потрібно застосувати відповідний нижній відступ. Знову ж таки, щоб уникнути негативного поля підняти нижній колонтитул над будь-яким вмістом

HTML

<body>
  <div class="content">
    <div class="content-inside">
      content
    </div>
  </div>
  <footer class="footer"></footer>
</body>

CSS

html, body {
  height: 100%;
  margin: 0;
}
.content {
  min-height: 100%;
}
.content-inside {
  padding: 20px;
  padding-bottom: 50px;
}
.footer {
  height: 50px;
  margin-top: -50px;
}

3. Задати calc() для content

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

<body>
  <div class="content">
    content
  </div>
  <footer class="footer"></footer>
</body>

CSS

.content {
  min-height: calc(100vh - 70px);
}
.footer {
  height: 50px;
}

Зверніть увагу на 70px в calc () та фіксовану висоту футера 50px. Припустимо, що останній елемент у вмісті має margin-bottom в 20 пікселів. Саме це нижнє поле плюс висоту футера необхідно скласти разом, щоб відняти з висоти області перегляду. Так, ми використовуємо тут відносні одиниці, як ще один маленький трюк, щоб уникнути необхідності встановлювати 100% висоти тіла, перш ніж ви зможете встановити 100% висоти контенту.

4. За допомогою flexbox

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

HTML

<body>
  <div class="content">
    content
  </div>
  <footer class="footer"></footer>
</body>

CSS

html, body {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1 0 auto;
}
.footer {
  flex-shrink: 0;
}

Можна навіть додати заголовок вище або нижче.

5. За допомогою Grid

Розмітка за допомогою сітки ще новіша (і менш широко підтримується), ніж flexbox. Ви також можете легко використовувати його для прилипання футера до низу сторінки.

HTML

<body>
  <div class="content">
    content
  </div>
  <footer class="footer"></footer>
</body>

CSS

html {
  height: 100%;
}
body {
  min-height: 100%;
  display: grid;
  grid-template-rows: 1fr auto;
}
.footer {
  grid-row-start: 2;
  grid-row-end: 3;
}

Але мінус grid те, що не всі браузери його нормально підтримують

Це має працювати в останніх версіях Chrome або Firefox і, ймовірно, у новішій версії Edge.

Поширити

Напишіть свій коментар

Ваша електронна адреса не буде опублікована. Обов’язкові поля позначені *
Your email address will not be published. Required fields are marked *

Хостинг Україна

Поділіться

Найпопулярніші публікації

Замовити розробку вебсайту

IT Service Request Form (#1)

Заповніть цю форму, і ми незабаром зв’яжеться з вами.