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

27 11 2021

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

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

Ми покажемо 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.

Поширити

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

Ваша електронна адреса не буде опублікована. Обов’язкові поля позначені *

Недавні записи

5 способів притиснути footer до низу сторінки
5 способів притиснути footer до низу сторінки
Читати далі
Цікаві посилання
Цікаві посилання
Читати далі
Обрізка тексту і / або заміна стандартної функції the_excerpt ()
Обрізка тексту і / або заміна стандартної функції the_excerpt ()
Читати далі
Дозволити SVG через WordPress Media Uploader
Дозволити SVG через WordPress Media Uploader
Читати далі
Видалити панель адміністратора WordPress для учасників
Видалити панель адміністратора WordPress для учасників
Читати далі
Пошук Custom Posts
Пошук Custom Posts
Читати далі