5 способов создать прилипающий футер


Содержание материала:

Лучший способ прижать футер используя flexbox

При разработке веб-сайтов в какой-то момент, вероятно, можно столкнуться с такой задачей как прижатие футера к низу страницы, в этой статье мы разберем как это сделать, используя flexbox.

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

В этом кратком учебном пособии мы рассмотрим современный метод построения футеров, как в CSS прижать футер, чтобы он всегда придерживался самого низа страницы.

Разберем наш способ

Чтобы предотвратить эту ошибку, мы будем создавать нашу страницу, используя flexbox — самый продвинутый инструмент, который CSS3 может предложить для построения адаптивных макетов.

Итак, чтобы в CSS прижать футер, flexbox-модель становится самым лучшим вариантом. На нашей простой странице для демонстрации будет заголовок, основной раздел и нижний колонтитул.

Чтобы включить модель flex, мы добавляем display: flex в тело и изменяем направление в столбец (по умолчанию это строка, которая является горизонтальной компоновкой). Кроме того, html и body потребуют 100% высоты с целью заполнения всего экрана.

После этого нужно настроить, какое количество места займет каждый раздел. Мы добились этого благодаря свойству flex , которое объединяет три гибких спецификации в одну:

  • flex-grow — определяет, сколько свободного места в контейнере переходит к элементу;
  • flex-shrink — определяет, насколько будет сокращаться элемент, когда для всего не будет достаточно места;
  • flex-basis — размер для элемента, установленный по умолчанию.

Мы хотим, чтобы наш верхний и нижний блоки занимали такое количества места, какое им нужно, и все остальное было зарезервировано для основного раздела контента. Для такого макета, чтобы через CSS прижать футер (flexbox), все выглядит следующим образом:

Чтобы увидеть эту технику в действии, ознакомьтесь с нашей демонстрационной страницей в конце страницы. Используя большую розовую кнопку, вы можете изменить количество контента, чтобы понаблюдать за тем, как макет адаптируется.

Подводим итоги и делаем выводы

Таким образом, flexbox можно считать отличным союзником при построении макетов с нуля. Все основные браузеры поддерживают его с несколькими незначительными исключениями, поэтому его довольно безопасно использовать во всех проектах IE9+. На сайте вы можете найти ещё один способ, но уже используя только CSS – «Как прижать футер к низу страницы».

Надеемся, наш метод создания закрепленных футеров был вам полезен, вы узнали что-то новое и вам понравилась эта статья. Оставьте нам комментарий, если знаете отличный способ использования flexbox!

Прилипающий футер к низу страницы

В этой небольшой статье, рассмотрим как сделать футер который будет прилипать к низу страницы.

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

Для того чтобы прибить футер к низу страницы существует множество способов. Рассмотрим наиболее корректно работающие способы.

На заметку опытному верстальщику: Лучший способ сделать липкий футер

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

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

Я начну строить нашу страницу с помощью верстки адаптивных блоков. Кто еще до сих пор не знает, но начиная с 21 апреля 2015 года Гугл ввел новые методы ранжирования сайтов, в основе которого лежит адаптивный дизайн сайта. Если Ваш сайт не имеет адаптивного дизайна, Ваш ресурс будет понижаться в выдаче поисковой системы. Вот оно чудо мобильных устройств.

Моя демонстрационная страница будет самая что ни на есть простая. Состоять он будет из трех основных частей:

2.основной раздел (main section);

Вот вам пример html кода, ничего в нем сверхъестественного нет.

Первым делом добавим display: flex в body, и добавим направление направление для flex-элементов размещенных на нашей странице (по умолчанию flex-direction: row; расположение объектов слева направо для ltr, и справа налево для rtl). Кроме этого добавим height: 100%;, для того, чтобы заполнить весь экран.

Теперь я задам параметры, которые будут определять, какое место будет занимать тот или иной блок на странице. Сделаю это с помощью свойства Flex. Ниже я привел ещё ряд свойств, с помощью которых можно будет задать:

flex-grow – Определяет для flex-элемента возможность «вырастать» при необходимости

flex-shrink – Определяет для flex-элемента возможность сжиматься при необходимости

flex-basis — Определяет размер по умолчанию для элемента перед распределением пространства в контейнере

Я хочу, чтобы мой footer занимал столько место, сколько ему нужно, а все оставшееся место было бы доступно для основного содержимого. Ниже я привожу пример того, как выглядит мой CSS код:

Для того чтобы увидеть этот метод в действии, перейдите на демо-страницу, нажав на ссылку ниже. Для увеличения контента, кликните на большую розовую кнопку, и понаблюдайте, как адаптивный макет изменяется и толкает footer вниз.

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

Я надеюсь, что Вам понравился именно этот способ создания простых липких футеров и что Вы нашли в этой статье что-то новое и полезное для себя. Оставляйте свои комментарии, если у вас есть свой крутой трюк с адаптивными блоками, напишите мне.

droganaida / sticky_footer.html

Среди владельцев котов на 17% больше людей с ученой степенью.


Мозг кошки похож на человеческий. За эмоции у кошек отвечают те же самые участки, что и у людей.

Чрезмерная любовь к кошкам называется айлурофилией.

Кошки у своих хозяев снижают риск инсульта и инфаркта на треть.

Исааку Ньютону приписывают изобретение кошачьей двери.

Как всегда прижимать footer к низу экрана?

Есть основной блок

Если контента нет или он не занимает достаточного места, нужно чтобы минимальная высота .container была равна 100% от окна браузера. При этом футер должен быть внизу страницы и оставаться видимым.

Футер может менять высоту, но при этом он всё равно должен оставаться прижатым к низу окна браузера.

7 ответов 7

Для того, чтобы всегда прижимать футер к низу экрана, есть несколько решений:

1. Решение через абсолютное позиционирование для фиксированной высоты футера

2. Решение через Flexbox для адаптивной высоты футера

3. Решение через таблицы для адаптивной высоты футера

4. Решение на нативном JavaScript для адаптивной высоты футера

5. Решение через calc() для фиксированной высоты футера

6. Решение через Grid Layout для фиксированной высоты футера

Решение на flexbox .

Более универсальное в плане сопровождаемости, так как не требует задания фиксированной высоты и хаков с position: absolute . Если вам требуется также поддерживать IE 10/11, то решение включающее их поддержку находится в секции «Flexbox для Internet Explorer 10/11».

Случай с контентом на всю оставшуюся высоту:

Если надо чтобы был отступ от контента, но контент не занимал всю высоту, то используйте margin-top: auto для footer :

Flexbox для Internet Explorer 10/11

Для того, чтобы описанные выше способы заработали в IE 10/11 нужно помнить о следующих багах браузеров:

min-height не применяется к элементу с display: flex и flex-direction: column в IE 10-11. Используйте height где это возможно.

Chrome, Opera, and Safari не учитывают минимальный размер контента непосредственных детей контейнера c display: flex . Установите flex-shrink в 0 (вместо значения по умолчанию 1 ) чтобы избежать нежелательного «сжатия».

Случай с контентом на всю оставшуюся высоту:

Если надо чтобы был отступ от контента:

CSS Grid Layout

Случай с контентом на всю оставшуюся высоту:

Если надо чтобы был отступ от контента, но контент не занимал всю высоту, то используйте align-self: start для footer :

CSS Grid Layout для Internet Explorer 10/11

В Internet Explorer 10/11 реализована устаревшая версия модуля CSS Grid Layout. С практической точки зрения это значит, что реализация этого модуля очень сильно разнится от остальных браузеров, которые поддерживают данный модуль.

Самое главное, о чём нужно помнить, что в IE элементы не располагаются по умолчанию по свободным ячейкам по порядку, а просто кладутся друг на друга в самую первую ячейку. То есть в других браузерах значения по умолчанию grid-row : auto и grid-column: auto , тогда как в IE -ms-grid-row : 1 и -ms-column: 1 , поэтому если номер строки или стоблца элемента не совпадают с 1 , то придётся их прописывать по другому.

Оставльное — более тривиально. Часть свойств не поддерживаются (вроде grid-areas , grid-gap и т.д.), часть называются по другому или требуется другой синтаксис и могут иметь отличные умолчания.

Случай с контентом на всю оставшуюся высоту:

Если надо чтобы был отступ от контента, но контент не занимал всю высоту, то используйте align-self: start и -ms-grid-row-align: start для footer :

Как без костылей сделать так, чтобы footer сайта всегда был внизу?

Ну визуально, есть шапка, основной контент и подвал:

Как обычно, если main пустой или имеет мало содержимого, то из-за высоты этого контента за ним тоже идет footer.
Как вы решаете такую задачу?
Конечно не стоит делать через:

так как если main увеличится, то он не увидит footer и как бы перепрыгнет.


  • Вопрос задан более двух лет назад
  • 8015 просмотров

В примере и footer и header прижаты

не бойся добавить обертку к разметке, от этого никто еще не умер.
есть всего 2 случая:
1. высота футера заранее известна и жестко можно её указать. в этом случае обычно использую вот такое

если используется less/sass то еще проще — заводим переменную (типа $footer_height) и юзаем ее и в паддинге (padding-bottom:$footer_height+15px) и в стилях футера (height:$footer_height; margin-top:-1*$footer_height;). замена высоты футера будет в одном месте (dry!)
2. второй вариант — высота может меняться — в основном у адаптивных сайтов.
расскажу как обойтись без флексбокс но нужно немного JS.
за высотой футера следит скрипт, и при каждом ресайзе страницы обновляет высОты и маржины/паддинги. использовать jquery проще всего, плюс, он почти всегда есть почти везде.
выглядит примерно так.

——————————
варианты с позиционированием крайне не люблю — дело не в том что я не умею с ним обращаться. я то как раз таки умею, а вот многие другие делают из этого лютые костыли, которые потом заколебешься переделывать. так что лучше не используйте позиционирование там, где оно не нужно (в прибитии футера к полу например).
то что бутстрап использует позиционирование в своём прибитом футере не значит что это супер-правильно или это best-practices. просто они решили сделать так а не как то иначе.

От хедера до футера: 5 способов мотивировать пользователя пролистать ваш лендинг до конца

Время, когда дизайнеры стремились разместить всю самую важную информацию до «линии сгиба» (перехода на второй экран), уже прошло. Длина лендингов увеличивается, и во многом этому способствует адаптивность сайтов — растущее количество мобильных пользователей обязывает делать прокрутку на лендингах, так как чем меньше экран, тем длиннее лендинг.

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

1. Важный контент — в начало

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

2. Визуальный сигнал, побуждающий к скроллингу

Иногда лучший способ мотивировать посетителя прокрутить страницу — попросить его об этом. Просто сообщите, что часть информации доступна ниже. Тонкий, ненавязчивый сигнал. Например, стрелка, указывающая за пределы экрана, или текст «Прокрутите вниз» даст вам нужный эффект.

Даже маленький значок стрелки дает знак пользователю листать дальше

3. Сделайте навигацию прозрачной

Навигация — это очень важный фактор пользовательского опыта. Самый большой риск неправильной навигации — дезориентация. Если меню теряется, исчезает с экрана при скроллинге, посетителю придется возвращаться назад, чтобы найти нужную информацию (например, контакты). Часто это расстраивает (если не сказать раздражает), и он бросает страницу, так и не дойдя до конца.

Решение проблемы лежит на поверхности – фиксированная строка с навигацией, которая «крепится» к верхнему экрану и движется за человеком до футера.

Пример фиксированной строки навигации

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

4. Используйте анимацию для привлечения посетителей

Функциональные эффекты, например, параллакс или скролл-анимация, могут заинтересовать посетителя и убедят его просмотреть весь лендинг. Такие элементы превращают скроллинг в небольшую игру под названием «Что же будет дальше?»

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

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

5. Избегайте произвольного скроллинга

Наверняка вам знаком такой прием — скроллинг осуществляется произвольно, без участия пользователя. Это негативно сказывается на пользовательском опыте, так как посетитель не контролирует происходящее на экране, и вместо желаемого эффекта (интереса пользователя) имеет место обратный – желание уйти с этой странной страницы. Даже супер-бренды «грешат» этим:

Apple использует эффект произвольного скроллинга

Вместо заключения

Скроллинг от хедера до футера обеспечат лендингу высокую глубину просмотра и хорошую «репутацию» у поисковых систем. Кроме того, такое внимание пользователя практически гарантирует конверсию. Вы узнали 5 способов «продлить» скроллинг, но помните – если контент и содержимое одностраничника действительно интересны, а интерфейс интуитивно понятен, посетитель с удовольствием изучит ваш лендинг до конца.

8 полезных приемов в CSS: Эффект параллакса, прилипающий футер и многое другое

В этой статье я поделюсь некоторыми полезными советами и приемами, без понимания которых я бы не смог успешно завершить свой путь по изучению CSS. Кроме того, вы вряд ли найдете данные приемы в большинстве учебных пособий по CSS

1. Прилипающий футер

Для большинства проектов вам потребуется футер, который должен оставаться в нижней части экрана, независимо от размера контента, но, если контент страницы проходит через окно просмотра (viewport) — футер должен адаптироваться вместе с остальным контентом.

До CSS3, не зная точную высоту своего футера, добиться этого эффекта было очень трудно. И хотя мы и называем его “прилипающий футер”, вы не можете просто прописать ему свойство position: sticky , так как это может блокировать контент.

На сегодняшний день, наиболее подходящим решением является использование Flexbox. Суть в том, чтобы использовать свойство flex-grow в div , содержащем основной контент страницы. В приведенном ниже примере я использую тег main .

flex-grow определяет, какую часть свободного пространства может занять контейнер, в соотношении с другими контейнерами. При значении 0 вы вообще ничего не увидите, поэтому нужно установить значение 1 или выше. В приведенном ниже примере я использовал свойство flex: auto , которое по умолчанию устанавливает значение flex-grow равное 1 .

Чтобы избежать “нежелательного поведения”, мы добавим свойство flex-shrink: 0 в тег footer . flex-shrink определяет фактор сжатия flex-элемента. Flex-элементы будут заполнять контейнер в зависимости от значения flex-shrink , когда стандартная ширина flex-элементов шире, чем flex-контейнер.


Обновление : Вышеупомянутое решение может некорректно работать в Internet Explorer 11. Я протестировал свой код в IE11, но он работал вполне нормально.

2. Увеличение изображения при наведении

Эффект увеличения изображения при наведении — это отличный способ привлечь внимание пользователя к кликабельной картинке. Когда пользователь наводит курсор на изображение, оно немного увеличивается, но его размер остается прежним.

Для достижения данного эффекта, нам потребуется обернуть обычный тег img в тег div в HTML-коде.

Затем в CSS нам нужно установить значения width и height для родительского элемента и убедиться, что значение свойства overflow установлено на hidden . Далее вы сможете применить любой вид анимации, посредством свойства transform , к img в теге div .

3. Темный режим

Если вы ищите быстрый способ, как применить “темный режим” к своему веб-сайту, попробуйте использовать фильтры invert и hue-rotate .

Значения свойства filter: invert() могут варьироваться от 0 до 1 , где 1 меняет белый цвет на черный.

filter: hue-rotate() меняет цвет изображения в зависимости от заданного угла поворота в цветовом круге. Значение задается в градусах от 0deg до 360deg .

Соединив эти свойства в теге body , вы сможете быстро опробовать темную версию своего сайта (Чтобы фильтры подействовали на фон, вы должны задать ему цвет).

Используя эти настройки, мы можем мгновенно преобразить домашнюю страницу Google:

В Chrome или Firefox нажмите F12, чтобы открыть инструменты разработчика. Оттуда вы можете редактировать CSS любого сайта.

4. Пользовательские маркеры списка

Чтобы создать пользовательские маркеры для неупорядоченного списка, вы можете использовать свойство content вместе с псевдоэлементом ::before .

В приведенном ниже CSS коде я использую два класса — .complete и .incomplete , чтобы отделить один тип маркера от другого.

Бонус: Навигационная цепочка или “хлебные крошки”

Существует множество полезных способов использовать свойство content , и я не удержался, добавив еще один.

Поскольку слэш и другие символы, используемые для разделения “хлебных крошек”, являются чисто стилистическими, имеет смысл определить их в CSS. Как и многие примеры в этой статье, этот эффект опирается на псевдокласс last-child — доступный только в CSS3:

5. Эффект параллакса

Этот запоминающийся эффект становится все популярнее день ото дня. Мы тоже не будем стоять в сторонке и воспользуемся им, чтобы оживить страницу.

В то время как обычные изображения на странице перемещаются в зависимости от того, куда скроллит пользователь, изображения с эффектом параллакса остаются в зафиксированном положении — перемещается только окно, через которое его видно.

Пример с использованием только CSS

Обязательным свойством для простейшей версии этого эффекта является background-attachment: fixed , фиксирующее расположение фонового изображения внутри окна просмотра (viewport). (Противоположный эффект достигается с помощью background-attachment: scroll ).

6. Кадрирование изображения при помощи анимации

Как и в случае с “прилипающим футером”, до CSS3 было очень сложно кадрировать изображение. Сейчас же у нас есть два свойства, которые упрощают этот процесс: object-fit и object-position . Вместе они позволяют изменять размеры изображения, не влияя на соотношение его сторон.

Да, всегда есть возможность кадрировать ваше изображение в фоторедакторе, но большим преимуществом кадрирования в браузере является то, что это можно сделать при помощи анимации.

Чтобы продемонстрировать этот прием как можно проще, нижеприведенный пример запускает эффект при помощи тега . Таким образом, мы сможем использовать псевдокласс :checked в CSS и нам не потребуется никакой JavaScript:

7. Режимы наложения

Если у вас есть опыт использования Adobe Photoshop, тогда вы, вероятно, знаете, насколько разнообразными могут быть режимы наложения для создания неповторимых и интересных эффектов. Но знаете ли вы, что большинство из этих режимов наложения также доступны в CSS?

Вот так выглядит домашняя страница Medium, если у изображений выставлено свойство background-color на светло-голубой (lightblue) и blend-mode на difference :

Свойство mix-blend-mode определяет режим смешивания цветов выбранного элемента с нижележащими слоями. Так, например, вы можете создавать подобные эффекты, используя mix-blend-mode с color-dodge и цвет фона lightsalmon .

Примечание: В настоящее время в Chrome 58+ имеется ошибка, из-за которой mix-blend-mode не будет отображаться на элементах, расположенных в тегах или , у которых не задан цвет. Проще всего в этой ситуации назначить этим тегам свойство background-color: white .

8. Имиджборд в стиле Pinterest

CSS Grid и Flexbox значительно упростили процесс создания различных типов адаптивных макетов, а также позволили нам легко центрировать элементы по вертикали, что прежде было очень сложно.

Тем не менее, есть тип макета, к которому эти инструменты плохо подходят. Данный макет используется Pinterest — в нем вертикальное расположение каждого элемента изменяется в зависимости от высоты элемента над ним.

Самый лучший способ добиться такого же результата — использовать в CSS свойства колонок. Чаще всего они используются для создания нескольких колонок текста в газетном стиле, но есть и другой отличный пример использования.

Чтобы это сработало, вам нужно обернуть свои элементы в div и присвоить этому блоку свойства column-width и column-gap .

Затем, чтобы предотвратить разделение элементов между двумя колонками, добавьте column-break-inside: avoid отдельным элементам.

Приведенный выше пример также отлично иллюстрирует псевдокласс :not() . Он идет вместе с псевдоклассом :hover , поэтому все элементы, кроме того, на который наведен курсор, угасают.


Дополнительные ресурсы

Я надеюсь, что вышеприведенные примеры прояснили некоторые полезные CSS эффекты и, возможно, даже привлекли ваше внимание к функциям, о которых вы до этого не знали.

Было трудно составить список из 8 CSS приемов, так как были и другие пункты, которые я бы хотел добавить. К ним относятся такие функции, как keyframe анимация, scroll-snapping (умная прокрутка), более сложная панель навигации, 3D-эффекты, CSS-оптимизация веб-страницы для печати.

Эти приемы довольно легко изучить самостоятельно, поэтому я оставлю ссылки к моим любимым ресурсам, чтобы вы узнали о них подробнее.

Прижимаем футер к низу страницы

Каждый верстальщик рано или поздно сталкивается с необходимостью прижать подвал (футер) сайта к низу страницы. В сети существует несколько способов, позволяющих решить данную проблему. Я покажу некоторые из них, которые сам использую на практике.

Простейшая html разметка:

Способ #1

Footer прижимается к низу путем его абсолютного позиционирования и вытягивания высоты родительских блоков ( html , body и wrapper ) на 100%. При этом блоку content нужно указать нижний отступ, который равен или больше высоты футера, иначе последний закроет часть контента.

Способ #2

Footer прижимается вниз за счет вытягивания блока content и его «родителей» на всю высоту окна браузера и подъема футера вверх через отрицательный отступ ( margin-top ) для избавления от появляющегося при этом вертикального скролла. В данном случае необходимо обязательно указать высоту подвала, и она должна быть равна величине отступа. Благодаря свойству box-sizing: border-box , мы не позволяем блоку с классом content превысить высоту 100%. То есть в данном случае min-height: 100% + padding-bottom: 90px равняется 100% высоты окна браузера.

Способ #3

Данный способ хорош тем, что, в отличие от остальных способов (кроме 5-го), высота футера значения не имеет. Здесь мы эмулируем поведение таблицы, превратив блок wrapper в таблицу, а блок content в строку таблицы (свойства display: table и display: table-row соответственно). Благодаря этому, а также тому, что блоку content и всем его родительским контейнерам задана высота 100%, контент растягивается на всю высоту, но за минусом высоты футера, которая определяется автоматически — эмуляция таблицы не дает подвалу вылезть за пределы высоты окна браузера.

Способ #4

Данный способ не похож ни на один из предыдущих, и его особенность заключается в использовании CSS-функции calc() и единицы измерения vh , которые поддерживаются только современными браузерами. Здесь необходимо знать точную высоту футера. 100vh — это высота окна браузера, а 80px — это высота футера. И с помощью функции calc() мы вычитаем вторую величину из первой, тем самым прижимая футер к низу.

Способ #5

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

Способ #6

Здесь целая библиотека на разные случаи (используется Flexbox )

Как прижать футер к низу страницы с помощью CSS

Подготовка полигона для испытаний

Набросаем простенькую страничку, на которой будем экспериментировать:

И зададим для нее такие же простенькие стили:

Пока что это простое украшательство, мы добавили обертке штриховую рамку и раскрасили основные блоки — header , main и footer , чтобы проще их различать. Текущий результат не очень впечатляет, правда?)

Футер висит где-то высоко над землей, а мы очень хотим его к этой земле приклеить.

Постановка задачи

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

Position:absolute

Предупреждение: данный способ годится только для футеров фиксированной высоты (для блока footer определено свойство height)!

Выдернем футер из общего потока контента и спозиционируем его абсолютно, причем позиционировать будем относительно нашей обертки ( wrapper ), а точнее ее левого нижнего угла. Если мы абсолютно спозиционируем футер относительно самого окна браузера, он, конечно, прилипнет к низу, а вот отлепить его обратно будет уже проблематично. Даже когда контент начнет занимать всю страницу.

Что произошло? Да в общем ничего, за исключением того, что ширина футера уменьшилась до ширины его содержимого, а сам он наполз на контент главного блока. Чтобы исправить это пропишем футеру 100% ширину, а блоку main нижний паддинг (отступ).

При этом 100% будут браться от ширины блока wrapper , так как наш футер спозиционирован относительно него.
Однако, проблема по-прежнему не решена: футер парит высоко над землей. Логика подсказывает, что необходимо каким-то образом вытянуть наш шаблон на всю высоту экрана, но при этом не добавляя контент. Справиться с этой задачей поможет свойство минимальной ширины:

Ничего же не изменилось! — возмутитесь вы, и будете правы. Да, мы строго-настрого приказали блоку wrapper растянуться минимум на 100% от высоты доступной ему области. Однако, мы забыли, что этот блок находится внутри тела нашего документа — тега body , а тот, в свою очередь, внутри html , которым никто не потрудился сообщить о том, что следует занять всю доступную высоту. Понаблюдать за этой связью мы можем, назначив body любую высоту, например:

Прогресс налицо — футер уполз вниз. Теперь просто задаем body и html 100%-ную высоту и радуемся прилипшему футеру.

Табличная верстка

Не пугайтесь, никто не заставляет вас верстать таблицами, эта технология постепенно отходит в прошлое. Однако, сложно отрицать тот факт, что таблицы в некоторых аспектах — вещь крайне удобная. Например, в позиционировании футера. Мы можем заставить наши блоки вести себя как строки таблицы с помощью CSS-свойства display:table-row . Это весьма удобный метод, который, к тому же, не требует категорично определять высоту футера.
Блок wrapper станет таблицей, а блоки header , main и footer ее рядами.

На первый взгляд ничего не изменилось. Однако теперь давайте зададим таблице и ее родительским блокам 100%-ную высоту.

Что такое произошло? Наша таблица растянулась на всю высоту экрана, но все блоки имеют равную ширину. Это волшебное свойство таблиц — автоматически выравнивать высоту своих рядов. С этим очень легко разобраться. Зададим футеру и хедеру высоту в 1 пиксел. Не бойтесь, они не превратятся в узкие полоски, их реальная высота будет высчитываться в зависимости от контента. Этот способ лишь позволить блоку main растянуться во всю высоту страницы.

В принципе, никто не мешает вам и здесь задать конкретную высоту для футера или хедера.
[context]

Флексбоксы

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

Это флексбоксы.
С их помощью решение проблемы «липкого футера» осуществляется очень просто и очень изящно:

Топ-пост этого месяца:  Стиль написания кода React несколько правил для управления внешним видом
Добавить комментарий
html lang = » en » dir = » ltr » >
head >
title >BlondieCode — Лайфхаки программиста — Приклеенный футер title >
meta charset = » utf-8 » >
style >
/* ============ Сброс стилей ============= */
* <
margin : 0 ;
>
html , body <
height : 100 % ;
>
/* ============ Основные стили ============= */
body <
background : #ffffff ;
color : #222222 ;
font-family : Arial , Helvetica , sans-serif ;
>
.content , .header , .footer <
box-sizing : border-box ;
padding : 20 px ;
width : 100 % ;
>
.header , .footer <
background : #008080 ;
color : #ffffff ;
>
.content p <
margin : 10 px 0 ;
font-size : 16 px ;
line-height : 1.8 ;
>
/* =================================================================================== */
/* =============== Откомментируй любой из способов приклейки футера ================== */
/* =================================================================================== */
/* ============ Способ 1 — абсолютное позиционирование ============= */
/* body <
position: relative;
padding-bottom: 58px;
box-sizing: border-box;
>
.footer <
position: absolute;
bottom: 0;
height: 58px;
> */
/* ============ Способ 2 — при помощи псевдоэлемента :after ============= */
/* .content <
min-height: calc(100% — 58px);
margin-bottom: -58px;
>
.content:after <
content: »;
display: block;
>
.content:after, .footer <
height: 58px;
>/*
/*============ Способ 3 — Flexbox ============= */
body <
display : flex ;
flex-direction : column ;
>
.content <
flex-grow : 1 ;
>
style >
head >
body >
div class = » header » >BlondieCode — Лайфхаки программиста — Приклеенный футер div >
div class = » content » >
p >Среди владельцев котов на 17% больше людей с ученой степенью. p >
p >Мозг кошки похож на человеческий. За эмоции у кошек отвечают те же самые участки, что и у людей. p >
p >Чрезмерная любовь к кошкам называется айлурофилией. p >
p >Кошки у своих хозяев снижают риск инсульта и инфаркта на треть. p >
p >Исааку Ньютону приписывают изобретение кошачьей двери. p >
p >Кошки спят около 70% своей жизни. p >
p >Поверхность носа у кошек так же уникальна, как отпечатки пальцев у людей. p >
p >Кошки узнают ваш голос, но предпочитают его игнорировать. p >
p >За информацию о котиках спасибо AdMe.ru! Они стояли в топе выдачи по запросу & laquo ; Факты о котиках & raquo ; =) p >
div >
div class = » footer » >#BlondieCode © 2020 div >
Оставлю это здесь, чтобы поиграть с высотой футера 😉