Як зберегти нижній колонтитул там, де йому належить?

Ця публікація також доступна корейською мовою .

Колонтитул - це останній елемент на сторінці. Як мінімум, він знаходиться внизу області перегляду або нижче, якщо вміст сторінки вищий за область перегляду. Просто, правда? ?

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

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

Це показує поведінку, якої ми не хочемо і хочемо:

Давайте розглянемо підхід для досягнення цього.

Отримання колонтитула під контролем

index.html:

main.css:

#page-container { position: relative; min-height: 100vh; } #content-wrap { padding-bottom: 2.5rem; /* Footer height */ } #footer { position: absolute; bottom: 0; width: 100%; height: 2.5rem; /* Footer height */ }

То що це робить?

  • page-containerОгинає все на сторінці, і встановлює її мінімальну висоту до 100% від висоти вікна перегляду ( vh). Як воно є relative, його дочірні елементи можуть бути встановлені з absoluteпозицією на основі цього пізніше.
  • content-wrapМає нижню прокладку , яка є висотою колонтитула, гарантуючи , що досить точно місць залишаються для колонтитула всередині контейнера вони обидва в. Обгорткового divвикористовуються тут , який буде містити всі інший вміст сторінки.
  • Встановлено footerзначення absolute, дотримуючись bottom: 0того, page-containerщо знаходиться всередині. Це важливо, оскільки це стосується не absoluteобласті перегляду, а переміщення вниз, якщо page-containerвона вища за область перегляду. Як уже зазначалося, 2.5remу цьому content-wrapвище використовується його висота, довільно встановлена тут .

І ось у вас це є. Ваш нижній колонтитул тепер залишається там, де ви очікували!

Останні штрихи

Звичайно, це CSS, тому він не був би повним без певних міркувань щодо UX та альтернативного підходу, min-height: 100%а не використання 100vh. Але у цього є свої недоліки.

Також можна використовувати Flexbox (з функцією flex-grow) або Grid, і вони дуже потужні.

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

Дякуємо за читання. Ось ще кілька речей, які я нещодавно писав:

  • Посібник для початківців щодо служби еластичних контейнерів Amazon
  • Тестування React за допомогою Jest та ферменту