Как сохранить нижний колонтитул на своем месте?

Этот пост также доступен на корейском языке .

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

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

Для быстрого исправления вы можете полностью разместить нижний колонтитул внизу страницы. Но у этого есть и обратная сторона. Если контент становится больше, чем область просмотра, нижний колонтитул останется «прилипшим» к нижней части области просмотра, хотим мы этого или нет.

Это показывает поведение, которое мы не хотим и хотим:

Давайте посмотрим, как это сделать.

Получите контроль над нижним колонтитулом

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 и Enzyme