Как сделать липкий футер
Делаем футер страницы «липким» (Sticky Footer)
Часто, при создании сайтов, веб разработчики сталкиваются с проблемой «плавающего» футера. Этот эффект возникает в случае, когда контента на странице слишком мало чтобы заполнить всю высоту экрана. В этом случае футер страницы зависает посреди экрана, что смотрится достаточно странно.
Конечно, можно расширить страницу до необходимой высоты при помощи различных «распорок» типа невидимых дивайдеров, пустых разделов, изображений — но это не реальное решение проблемы. Что если не вы, а ваш клиент будет наполнять страницы контентом. Необходим другой метод.
Существует несколько способов решения этой проблемы с использованием средств CSS или JavaScript. Рассмотрим пару из них. Способ с использованием CSS выглядит попроще, но метод JavaScript более функционален.
1. Создание «липкого» футера при помощи CSS
Несколько строчек простого кода CSS заставят подвал страницы быть всегда прижатым к нижнему краю экрана.
Основным недостатком этого способа является то, что остается на своем месте всегда, даже при прокрутке длинных страниц и съедает ценное пространство (особенно на маленьких экранах смартфонов и планшетов). Поэтому, применять это решение можно только на отдельных страницах, контент которых заведомо не будет увеличен в будущем.
И конечно, этот метод совсем не подходит для создания страниц и постов вашими клиентами не обладающими навыками вебразработчика.
Здесь нужно более универсальное решение. И это решение может дать использование JavaScript.
2. Создание Sticky Footer с помощью JS
Код, представленный ниже, разработал Луис Алехандре, владелец сайта Divi4u.com. Этот скрипт, в зависимости от ситуации делает футер «липким» на неполных страницах и обычным для страниц с достаточной длиной.
Скрипт динамически рассчитывает правильное положение футера учитывая значения высот всех составляющих блоков страницы. Теперь, даже если вы залогинились в вордпресс и на станице появился админбар, позиция футера все равно останется правильной.
Для тех, кто не желает возиться с вставкой кода, автор создал плагин Divi Quasi-Sticky Footer. Его можно скачать отсюда.
5 способов создать прилипающий футер
Дата публикации: 2016-06-20
От автора: главная задача прилипающего футера «прилипать» к нижней части окна браузера. Если на странице много контента, то футер должен прилипать строго к нижней границе экрана. Если же контента слишком мало, чтобы пододвинуть футер вниз, опять же требуется его туда опустить.
Отрицательный нижний margin у блока-обертки
Есть блок-обертка, в котором находятся все блоки кроме футера. Данному блоку назначен отрицательный нижний margin, равный высоте футера.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Отрицательный верхний margin на футере
В этой технике не нужен блок push, но тут требуется добавить дополнительный блок-обертку вокруг контента, у которого задан нижний padding. Это сделано для того, чтобы из-за отрицательного margin’а футер не поднимался вверх.
Обе техники похожи, так как в них требуется добавить дополнительный HTML элемент.
Функция calc() уменьшающая высоту обертки
Один из способов отказаться от дополнительной разметки это настроить высоту блока-обертки с помощью функции calc(). В таком случае не будет перекрытия, два элемента стыкуются и образуют высоту в 100%.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Обратите внимание на 70px в функции calc() и 50px фиксированной высоты футера. Тут мы учитываем, что у футера есть нижний margin в 20px. Из общей высоты необходимо вычесть высоту футера и его нижний внешний отступ. Также мы используем единицы измерения vw, чтобы не задавать 100% высоты body, пока не задано 100% высоты блока обертки.
Flexbox
Основная проблема со всеми описанными выше методами в том, что там нужна фиксированная высота футера. В веб-дизайне фиксированная высота считается признаком плохого тона, контент ведь может меняться. Все должно быть гибким. Фиксированная высота это плохой звоночек. Flexbox позволяет не только не добавлять лишнюю разметку для создания прилипающего футера, но и использовать переменные в значении высоты.
Лучший способ прижать футер используя flexbox
При разработке веб-сайтов в какой-то момент, вероятно, можно столкнуться с такой задачей как прижатие футера к низу страницы, в этой статье мы разберем как это сделать, используя flexbox.
Этот явно «сломанный» макет происходит, когда футер расположен статически в конце тела, но на странице нет большого количества контента. Нет никакой визуальной информации, чтобы можно было в CSS прижать футер, и он остается посередине экрана, оставляя перед собой огромную область пробелов.
В этом кратком учебном пособии мы рассмотрим современный метод построения футеров, как в CSS прижать футер, чтобы он всегда придерживался самого низа страницы.
Разберем наш способ
Чтобы предотвратить эту ошибку, мы будем создавать нашу страницу, используя flexbox — самый продвинутый инструмент, который CSS3 может предложить для построения адаптивных макетов.
Итак, чтобы в CSS прижать футер, flexbox-модель становится самым лучшим вариантом. На нашей простой странице для демонстрации будет заголовок, основной раздел и нижний колонтитул.
Чтобы включить модель flex, мы добавляем display: flex в тело и изменяем направление в столбец (по умолчанию это строка, которая является горизонтальной компоновкой). Кроме того, html и body потребуют 100% высоты с целью заполнения всего экрана.
Мы хотим, чтобы наш верхний и нижний блоки занимали такое количества места, какое им нужно, и все остальное было зарезервировано для основного раздела контента. Для такого макета, чтобы через CSS прижать футер (flexbox), все выглядит следующим образом:
Чтобы увидеть эту технику в действии, ознакомьтесь с нашей демонстрационной страницей в конце страницы. Используя большую розовую кнопку, вы можете изменить количество контента, чтобы понаблюдать за тем, как макет адаптируется.
Подводим итоги и делаем выводы
Таким образом, flexbox можно считать отличным союзником при построении макетов с нуля. Все основные браузеры поддерживают его с несколькими незначительными исключениями, поэтому его довольно безопасно использовать во всех проектах IE9+. На сайте вы можете найти ещё один способ, но уже используя только CSS – «Как прижать футер к низу страницы».
Надеемся, наш метод создания закрепленных футеров был вам полезен, вы узнали что-то новое и вам понравилась эта статья. Оставьте нам комментарий, если знаете отличный способ использования flexbox!
Как правильно прижать плавающий футер к низу страницы
Это кошмар какой-то! Почему подвал вашего сайта опять « всплывает » и сдвигает дизайн? Неужели нельзя нормально прижать футер к низу страницы чем-нибудь? Контентом или кирпичами хотя-бы! Кирпич в монитор не пролазит?
Делаем правильный футер для своего сайта
Многие владельцы сайтов встречаются с этой проблемой, когда footer страницы просто всплывает « кверху ». И тогда непонятно, что делать. Чаще всего таким недостатком грешат дизайны сайтов, сверстанные на скорую руку, самостоятельно ( кружок «очумелые ручки» ) или начинающими веб-мастерами.
При этом на первых порах жизни сайта ничего ужасающего не происходит. И такая идиллия продолжается до тех пор, пока контент давит « своим весом » на подвал, не давая ему подняться вверх. Но стоит разместить на странице материал меньшего объема, и недавно « спокойный » футер моментально поднимается вверх, приводя весь дизайн сайта в неподобающий вид.
Для устранения этого « дефекта » сверстанного шаблона не обязательно тратиться на услуги веб-мастера. Чаще всего футер сайта можно поставить на место самостоятельно. Рассмотрим все возможные варианты устранения подобной проблемы:
Первый способ
Чтобы в дизайне страницы отделить место под подвал, мы устанавливаем отступ для тега в 100 пикселей:
Усовершенствованный вариант
Рассмотренный выше способ того, как сделать футер внизу страницы « незыблемым » не всем подходит. Если в будущем вы собираетесь модифицировать и совершенствовать дизайн своего сайта с помощью всплывающих окон, тогда лучше отказаться от использования предыдущей реализации.
Чем больше значение z-index элемента, тем выше он будет находиться в общем стеке « наслоения ».
Вот более совершенный вариант:
Вариант для подвала с нефиксированной высотой
Предыдущие способы реализации могут гарантировать, что футер будет всегда внизу страницы. Но только если подвал фиксированной ширины. А что делать, если количество размещаемого в нем контента нельзя спрогнозировать?
Это абзац, расположенный в подвале сайта. Футер нефиксированный, поэтому его размер может подстраиваться под размер содержимого: