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

Делаем правильный футер для своего сайта

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

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

Для устранения этого « дефекта » сверстанного шаблона не обязательно тратиться на услуги веб-мастера. Чаще всего футер сайта можно поставить на место самостоятельно. Рассмотрим все возможные варианты устранения подобной проблемы:

Первый способ

Первый способ « привязать » подвал « к дну » страницы построен на основе CSS . Для начала приведем код примера, а затем более подробно рассмотрим его реализацию:

Для того чтобы приклеить подвал к низу страницы тег мы вынесли за пределы контейнера ( слоя wrapper ). Растягиваем всю страницу и содержимое « тела » до границ экрана. Для этого в коде CSS мы задали высоту тегов и в 100%:

Минимальную высоту слоя-контейнера устанавливаем тоже в 100%. Для случая, если ширина контента будет больше, чем высота контейнера, задаем свойству значение auto . Благодаря этому wrapper будет автоматически подстраиваться под ширину размещенного на странице контента:

Строчка кода « height: 100% » предназначена для старых версий IE , которые не воспринимают свойство min-height .

Чтобы в дизайне страницы отделить место под подвал, мы устанавливаем отступ для тега в 100 пикселей:

На данном этапе мы получили веб-страницу шириной во весь экран и дополнительно 100 пикселей, которые « нейтрализуются » отрицательным значением отступа для футера ( margin: -100px ) при установленном для него относительном позиционировании ( position: relative ). Таким образом, с помощью отрицательного значения отступа мы « сдвигаем » подвал в область контейнера, для которого установлена высота в 100%.

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

Усовершенствованный вариант

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

Чаще всего в реализации pop-up окон используется свойство CSS z-index . С помощью его значений задается порядок наложения слоев друг на друга.

Чем больше значение z-index элемента, тем выше он будет находиться в общем стеке « наслоения ».

Но из-за того, что в предыдущем примере мы использовали отрицательное значение отступа для футера, нижняя часть всплывающего окна будет перекрываться верхней областью подвала. Даже несмотря на то, что оно будет иметь большее значение z-index . Потому что у родителя всплывающего окна ( wrapper ) значение этого свойства все равно меньше.

Вот более совершенный вариант:

CSS — код примера:

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

Вариант для подвала с нефиксированной высотой

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

Для этого потребуется более совершенный вариант для нефиксированного подвала. В нем футеру задается значение table-row для свойства display . Благодаря этому он будет отображаться как строка таблицы:

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

Футер сайта надежно прижат к низу страницу. Теперь он уж точно не всплывет, и « не поломает » весь дизайн ресурса. И все потому, что для фиксации подвала мы использовали не кирпичи, а возможности HTML и CSS .

Способ №1. Абсолютное позиционирование

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

<style>#parent{ position:relative; /* добавили */ background:black; height:300px;}#child{ position:absolute; /* добавили */ bottom:0; /* добавили */ background:red; height:100px; width:100px;}</style><div id=”parent”><div id=”child”>Текст дочернего элемента</div></div>

Результат:

Плюсы:

Простота

Минусы:

При абсолютном позиционировании другие элементы на странице ведут себя так, будто элемента с абс. позиционированием не существует.

Это значит что в таком случае:

<style>#parent{ background:black; height:300px;}#child,#child2,#child3{ display:inline-block; /* Сделали все div в одну строку */ height:100px; width:100px;}#child{ background:red;}#child2{ background:yellow;}#child3{ background:green;}</style><div id=”parent”><div id=”child”>Текст дочернего элемента 1</div><div id=”child2″>Текст дочернего элемента 2</div><div id=”child3″>Текст дочернего элемента 3</div></div>

Результат:

После проделанного выше способа получиться следующее:

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

Конечно, кто-то может поспорить и сказать, что мы можем выставить у каждого div разную велечину left, например так:

<style>#parent{ position:relative; /* добавили */ background:black; height:300px;}#child,#child2,#child3{ position:absolute; /* добавили */ bottom:0; /* добавили */ height:100px; width:100px;}#child{ left:0; /* добавили */ background:red;}#child2{ left:110px; /* добавили */ background:yellow;}#child3{ left:220px; /* добавили */ background:green;}</style><div id=”parent”><div id=”child”>Текст дочернего элемента 1</div><div id=”child2″>Текст дочернего элемента 2</div><div id=”child3″>Текст дочернего элемента 3</div></div>

Результат:

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

Но это ерунда, куда важнее универсальность и рациональность. Поясняю, пользуясь способом №1 мы должны:

Знать точное количество блоков;Для каждого блока рассчитать и написать координату left;Если со временем мы решим добавить ещё блоков, нам опять-таки придётся снова для каждого нового блока указывать свойство left.

Как привязать footer к низу экрана в Twitter Bootstrap?

Но решения, которые там предлагают, некорректно работают у меня.

Кто-нибудь сталкивался с такой же проблемой?

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

Что бы прикрепить подвал к низу страницы есть много вариантов. Самые простые — добавить для html и body min-height:100% и position:relative; Затем обернуть все во вреппер с паддингом снизу равным высоте вашего подвала, и последнему назначить Position:absolute;bottom:0.

Если у вас не вышло — просто поищите статей. Их в сети море. А сам бутстрап поидее не должен хоть как-то этому мешать.

А прокомментируйте пожалуйста, чем ваш вариант, сильно отличается по поведению от этого:

html, body <height: 100%; > .wrapper <min-height: 100%; height: auto !important; height: 100%; margin-bottom: -80px; /* Отрицательное значение высоты footer’а */ > .footer, .push <height: 80px; /* .push и .footer должны быть одинаковой высоты */ clear: both; >

Просто всегда использовал именно его, а тут задумался, может быть есть варианты чем-то сильно лучше.

Блин… что за советы… там есть встроенный класс: navbar-fixed-bottom

для bootstrap 3 есть отдельный пример с прижатым footer getbootstrap.com/examples/sticky-footer

в файл стилей нужно добавить

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

Мне больше нравится создавать таблицу такую

Довольно-таки странные советы. Рекомендую вам использовать css flexbox-элементы. Тогда всё будет динамично и не придётся заморачиваться насчёт высоты футера и делать position: absolut. Вам достаточно будет сделать так:

При таком способе у меня content залазит на header

Решение для футера с «резиновой» (адаптивной) высотой»для Bootstrap 3. Реализация здесь

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

Обратите внимание на технологию flexbox. Bootstrap 4 уже работает на ней

Вот такое накидал решение. Вроде бы все учел.

Пример html кода

Держите идеальный скрипт! Никаких костылей! Все работает четко!

sass mixin for Sticky footer

Достаточно все просто.

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

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

У меня, почему-то, все получались то stiky (поверх текста внизу), то не внизу (если содержимого страницы на пол экрана). Помог скрипт, найденный здесь. «Грязно», но работает.

Теперь достаточно иметь элемент с . Если текст не на весь экран, чтобы убрать полосу прокрутки, можно поменять 10 на 0.

В продолжение темы с футером в бутстрапе. Перепробовал кучу варинатов, но никак не могу зацепить футер к низу экрана. navbar-fixed-bottom работает, но фиксирует футер на экране, а это не красиво.

Хоть и вопрос старый, увидел его и сам задался вопросом. Поможет людям, которые попадают через поиск. К чему пришел я:

Вот как я решил проблему с футером, не обязательно в бутстрапе, просто при верстке макетов. В css есть такая штука как calc (по-сути расчеты разные выполняет, высоту окна и прочие). Нам надо main (блок для контента) сделать высотой 100% минус высота хэдера и футера min-height: calc(100% — 160px); тогда все получится идеально.

Ссылка с примером: https://jsfiddle.net/vpris/g14q6krt/41/ Набросал на скорую руку, с расчетами можно поиграться еще. Футер прижат прекрасно, не нужно городить js-код отслеживающий его положение. Есть примеры с пустым блоком, который высотой такой же как футер. Самому подвалу дается отрицательный маржин, но мой пример поинтереснее.

Там есть стили для класса qube. Создайте несколько дивов с таким классом и проверьте, main красиво растягивается, футер уходит вниз.

Как правильно оформить подвал сайта?

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

Это первый подвал сайта
:

Это второй подвал для сайта
:

Это третий подвал для сайта
:

Это четвертый подвал для сайта
:

Это пятый подвал сайта
:

Это шестой подвал сайта
:

Ну, как Вам эти Footer HTML? Понравился хотя бы один из них? Я надеюсь, что да?!

Если они вам понравились, тогда я предлагаю скачать их совершенно бесплатно прямо сейчас и использовать в своих целях!

В папке, которую Вы скачали содержится шесть файлов с Footer HTML. И вам остается только исправить в текстовом редакторе содержание под свой сайт и все!

К стати о текстовом редакторе! Я например пользуюсь,и вам советую, только . Так как он самый удобный и безопасный!

Вот теперь все

Спасибо за внимание!. (footer — производная от foot (англ.) — нога) — это самый нижний раздел сайта, противоположный шапке — верхней части

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

(footer — производная от foot (англ.) — нога) — это самый нижний раздел сайта, противоположный шапке — верхней части. Безусловно, голова сайта — шапка — самый важный элемент, но футер — это как земля под ногами: она должна быть прочной и функциональной. Хоть и не все пользователи пролистывают веб-страницы до конца, оставлять без внимания дынный раздел сайта не стоит.

Метод с использованием Flexbox

Эффект достигается путём задания:

Как это работает

Во-первых, мы гарантируем, что благодаря свойству , высота элемента будет равняться как минимум, высоте окна браузера. Это не приведёт к переполнению, если содержимого слишком мало (исключение – определённые мобильные браузеры), но если понадобится, позволит увеличиться по высоте.

Установка свойства задаёт поведение как у нормального потока документа в том плане, что блочные элементы занимают всё доступное место по всей ширине.

Преимуществом Flexbox является поведение при добавлении свойства . Этот трюк приводит к тому, что внешние отступы элемента, к которому применено это свойство, забирают всё доступное пространство в указанном направлении (или во всех направлениях). Например, задание оттолкнёт футер к нижней части экрана от расположенных выше элементов.

Проблема

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

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

Частые проблемы с футером

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

Если важно все, значит ничего из этого по-настоящему не важно. Что делать: Выделите нужные ссылки для решения задач пользователей

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

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

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

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

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

На основе статьи Nielsen Norman Group «Footers 101: Design Patterns and When to Use Each»

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

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

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

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

Базовая верстка. Футер далеко от низа страницы

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

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

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

Position: absolute

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

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

Абсолютное позиционирование футера

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

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

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

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

Страница растягивается на 100% от body

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

Того же эффекта можно было добиться, просто установив блоку .page минимальную высоту в 100vh .

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

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

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

Табличное отображение

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

Ограничение высоты шапки и футера

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

See the Pen by furrycat (@furrycat) on CodePen.

Флексбоксы

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

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

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

Использование flexbox-модели

Чего не должно быть в футере?

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

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

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

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

Способ 3. Использование calc() для уменьшения высоты обёртки

Один из способов не включать лишние элементы — это отрегулировать высоту обёртки с помощью calc() (пример 3). Тогда никакого перекрытия не будет, просто два элемента складываются друг с другом на общую высоту 100%.

Пример 3. Использование calc()

See the Pen
Sticky Footer with calc(); by Chris Coyier (@chriscoyier)
on CodePen.

Обратите внимание на 70px в calc() и фиксированную высоту подвала 50px. Можно предположить, что в содержимом у последнего элемента margin-bottom равен 20px

Именно это значение нужно сложить с высотой подвала, чтобы полученную сумму вычесть из высоты области просмотра. И да, мы используем единицы vh как небольшой трюк, чтобы не устанавливать 100% у body и обёртки.

Как прижать блок к низу?

1 HTML структура

Рассмотрим всё на простой структуре из 3-х блоков:

HTML КОД

1234567891011

<div id=“container”> <div id=“header”> <!– Содержимое шапки –> <div> <div id=“body”> <!– Содержимое центральной части –> <div> <div id=“footer”> <!– Содержимое нижнего блока –> <div><div>

Один общий блок, в котором находятся три видимых блока.

2 Стили CSS

Здесь также всё довольно просто:

CSS КОД

1234567891011121314151617181920212223242526272829

html,body { height100%;} #container { min-height100%; positionrelative;} /*Стили для блока с шапкой*/#header { background#222; padding10px;} /*Стили для центральной части*/#body { padding-bottom70px; /* Высота блока “footer” */} /*Стили для нижней части*/#footer { positionabsolute; bottom; width100%; height70px; /* Высота блока “footer” */ background#66ccff;}

Здесь хочу отметить строки с комментариями, которые находятся за свойствами. Это внутренний отступ снизу у центральной части и это же число у высоты нижней части (футера). В этом и есть весь секрет.

Что такое футер, насколько он важен и почему

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

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

Основные преимущества нижней части сайта

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

Акцент на важном

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

Она обязательно найдет своего пользователя, привлечет внимание и удержит на сайте

Максимум полезной и важной информации

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

Навигация по сайту

Если пользователь ушел далеко от хедера (шапки сайта) и приближается к футеру, значит, он еще не нашел то, что ему интересно и важно. Значит, все в ваших руках

Размещение навигационных ссылок упростит вашему потенциальному клиенту поиск нужной ему информации и продлит время пользования сайтом.

Максимальный захват внимания

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

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

CSS прижать footer к низу окна браузера

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

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

В процессе практики выделили 5 способов прижимания футера к низу окна браузера с помощью CSS.

HTML-код всех представленных способов имеет следующую структуру (отличие лишь в CSS-коде):

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

Первый способ

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

Второй способ

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

Благодаря свойству box-sizing: border-box, мы не позволяем блоку с классом .content превысить высоту 100%. То есть в данном случае min-height: 100% + padding-bottom: 90px равняется 100% высоты окна браузера.

Третий способ

Он хорош тем, что, в отличие от остальных способов (кроме 5-го), высота футера значения не имеет.

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

В результате footer прижат к низу.

Четвертый способ

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

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

Узнать, какие браузеры поддерживают calc() и vh, вы можете на сайте caniuse.com по следующим ссылкам: , .

Пятый способ (самый актуальный)

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

Узнать про поддержку браузерами свойства flex можно здесь.

• 2.91

Голосов: 928 | Просмотров: 80393