Footer — Прижать footer вниз (html)


Содержание

Задача прижать footer к низу окна браузера – это одна из самых часто встречаемых задач при верстке сайта.

В общем, ситуация следующая: на странице есть 3 области header, content и footer (верхняя часть страницы, содержимое и нижняя часть).

Бывают страницы, в которых содержимое занимает совсем немного места и, в итоге, они начинают выглядеть примерно вот так:

Нижняя часть сайта (footer) прижимается к контенту и внизу страницы остается пустое пространство.

Как избежать этой ситуации? Как прижать footer к низу окна браузера?

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

Итак, имеем следующий HTML-код:

Теперь посмотрите на код CSS, который позволит решить проблему и прижать footer к низу окна браузера.

В общем, теперь страница выглядит вот так:

Эффект достигается за счет задания элементу html минимальной высоты min-height 100% и относительного позиционирования position:relative.

Для элемента body обязательно нужно задать высоту 100%.

Теперь, когда блок footer будет абсолютно позионироваться относительно низа страницы

он встанет как раз в то место, где заканчивается 100% высоты элемента body.

Как прижать футер к низу страницы?

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

Решение проблемы.


    1. Отделяем футер от всего остального содержимого, помещая его за пределы обрамляющего блока wrapper.
    2. В файле стилей задаем высоту height у тегов html и body — 100%. Таким образом, растягиваем html и body на высоту экрана.
    3. Обрамляющему блоку wrapper задаем следующие параметры:
      • min-height: 100%; — указываем минимальную высоту блока wrapper (Старые версии IE не понимают min-height).
      • height: auto !important; — указываем на случай если контент будет занимать больше места, чем указанная высота. Таким образом, блок будет тянуться на высоту, занимаемую контентом.
      • height: 100%; — задаем для старых версий браузеров IE.
    4. У тега content задаем нижний padding — 100px; Делается это для того, чтобы на это место поместить footer. Зачем — читаем ниже.
    5. Сейчас мы получили высоту страницы равную 100% + 100px. Лишние 100px убираем следующим образом: у тега footer задаем отрицательный верхний отступ, равный высоте футера (height: 100px;) margin-top: -100px; Свойство position: relative; С помощью отрицательного верхнего отступа мы полностью перемещаем футер на область блока wrapper, который занимает 100% экрана.

Применяя такой способ, футер будет всегда прижат к низу страницы.
Заменив теги html5 на обычные div, применяя к ним теже свойства работает и в старых версиях, даже в IE6.

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

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

Какие проблемы возникли с нашим макетом сайта

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

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

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

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


Что бы это реализовать, нужно осуществить ряд манипуляций с кодом нашего макета. Причем, изменения мы будем вносить не только в файл стилевого CSS оформления Style.css, но и в Index.html, содержащий Html код и формирующий Div блоки. Но обо всем по порядку.

Для примера мы будем использовать созданный нами ранее трехколоночный макет сайта. При этом Index.html будет выглядеть так:

А в файле Style.css были прописаны следующие CSS свойства:

Ну, а сам макет выглядел примерно так:

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

Как прижать футер к низу макета сайта

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

Все содержимое страницы сайта помещается в открывающий и закрывающий теги Body и поэтому нам нужно в Style.css дописать для тега Body еще одно CSS свойство, задающее высоту равной 100%:

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

Основные свойства CSS, при желании, вы можете посмотреть в Уроках CSS. Теперь зададим для Div контейнера, в котором заключен весь наш макет, минимальную высоту равную 100%:

Еще я хочу его подсветить (div с ). Для этого задам ему рамку с помощью соответствующего свойства Border (тут читайте про рамки в CSS):

Свойство border: solid 3px black позволяет задать для данного контейнера сплошную рамку (solid) толщиной в 3 пикселя черного цвета. Это позволит наглядно увидеть, что контейнер с макетом растянулся на всю высоту экрана даже при малом количестве информации на странице:

Цукерберг рекомендует:  React Native —  это возможность быть быстрым

Теперь нам нужно будет вынести блок футера из общего контейнера и разместить его ниже, сразу же после общего. Что это даст? А то, что, наконец-то, соизволит опуститься вниз футер в макете, а не будет как прежде прижиматься к наиболее длинной его колонке. В этом случае Index.html примет следующий вид:

Обратите внимание, блок с футером теперь не находится внутри общего контейнера (maket), а следовательно его ширина теперь уже не регулируется CSS свойствами, заданными для maket в файле со стилевым оформлением Style.css. Футер будет по ширине растягиваться на весь экран, но все-таки он уже будет расположен внизу экрана, сразу под основным блоком:

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

Получается это потому, что основной контейнер (maket) занимает по высоте весь размер экрана (это определяется свойством min-height: 100% ), а футер располагается сразу за ним и для его просмотра уже придется использовать прокрутку, что не очень то удобно и функционально.

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

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


Поэтому сначала зададим контейнеру содержащему подвал высоту, прописав соответствующее свойство в Style.css:

А затем задаем для него отрицательный отступ сверху на высоту равную его высоте:

Это позволит подвалу подняться вверх ровно на свою собственную высоту и тем самым вписаться в экран браузера (теперь можно убрать CSS свойство border: solid 3px black из правила для maket, чтобы толщина рамки не мешала всему нашему макету вместе с футером поместиться в экране по высоте):

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

Вставляем распорку и боремся с Internet Explorer

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

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

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

Решение данной проблемы заключается в добавлении нового пустого Div контейнера (так называемой распорки) в основной контейнер нашего макета (maket), в то место, где раньше располагался блок с футером.

Задав для этого нового контейнера высоту, равную высоте подвала, мы сможем избежать наезда информации из основного контейнера на блок с футером. Присвоим этому контейнеру ID (тут читайте про CSS селекторы) с названием Rasporka и в результате Index.html нашего трехколоночного макета примет вид:

А в Style.css пропишем для этого (ID свойство Height, задающее высоту этому контейнеру-распорке равную высоте подвала:

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

Таким образом мы избегаем наездов и перекосов в нашем трехколоночном макете. Все будет четко и красиво (чинно и благородно):

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

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

Таким образом, нам нужно будет добавить для ID Footer дополнительные свойства:

С помощью свойства width:800px задается ширина равная 800 пикселей, а с помощью двух свойств margin-left: auto и margin-right: auto задается настройка отступа слева и справа от подвала автоматически, в результате чего эти отступы будут равными и наш герой выровняется по середине:

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


Все это происходит из-за того, что (браузер Internet Explorer 6 не понимает свойство min-height: 100%, которое мы использовали для задания минимальной высоты основного блока, равной высоте экрана.

Поэтому для решения этой проблемы нам придется применить так называемый хак, позволяющий объяснить (на пальцах) старым браузерам, что нужно делать. Перед списком CSS свойств для maket нужно будет вставить следующую комбинацию:

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

Итак, окончательный вид Style.css с прижатым к низу экрана футером будет следующим:

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

Можете также посмотреть видео «Работа с Html тегом div»:

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

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

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

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

В примере и 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. просто они решили сделать так а не как то иначе.

Цукерберг рекомендует:  #начинающий #ноль #чайник - Начинаю с полного нуля


Одним из основных правил вёрстки является прижатие footer к низу html-страницы, вне зависимости от размера основного контента. Существует множество способов это сделать. В данной теме мы рассмотрим несколько популярных способов как прижать footer к низу страницы:

Сначала создадим структуру html-документа. Все содержимое тега body нужно обернуть в общий div (в данном примере

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

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

Прижатие футера к низу страницы используя единицы измерения vh

1vh = 1% от высоты окна. При уменьшении высоты окна, уменьшается ширина, высота, шрифт элемента. Данные единицы поддерживаются только современными браузерами.

Перед применением лучше проверить в сервисе: https://caniuse.com/#search=calc.

Прижатие футера к низу экрана путём создания дополнительного блока

Этот способ предполагает создание дополнительной html-конструкции. Потребуется новый контейнер div. Обратите внимание, что блоку с селектором класса content задается отрицательный margin по размеру высоты дополнительного блока.

CSS-код в данном случае будет иместь следующий вид:

С уважением, Павлова Наталья

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

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

Благо в 2020 году уже есть не один способ реализации данной задачи. И в этой статье я вас познакомлю с ними.

Для примеров я буду использовать самую простую разметку страниц, состоящую из нескольких блоков. И так начнем.


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

Как прижать футер к низу страницы с помощью 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]

Флексбоксы

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

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

Как привязать футер к низу страницы

Сегодня найдем окончательное надежное решение вопроса как средствами css прижать футер к низу страницы с помощью css и html. Притянуть футер низ страницы. Также этим способом можно отцентровать контент content по середине страницы.

Для того чтобы прижать footer к низу страницы нужно создать определенную структуру html:

После того как структура страницы готова, приступаем к настройке css.

Цукерберг рекомендует:  Создаем прелестную контактную форму

Нам нужно сделать так чтобы html и body занимали всю высоту страницы (full screen height). А блок wrapper имел минимально высоту экрана, а контент его бы растягивал как нужно. Дальше нам нужно прижать футер к низу страницы или к низу экрана так чтобы он всегда оставался ниже контента, а если контента мало но футер прижимается в низу экрана. Также контенту нужно сделать отступ внизу для футера.

Прижать футер к низу экрана css код:

Этот способ работает только в случае фиксированного футера. Это означает что footer прижать к низу страницы будет сложнее если высота его динамическая, так как надо будет предусмотреть правильный нижний отступ для div с классом main. Тут уже нужен будет javascript и понадобится информация как в мобильном браузере получить высоту экрана.

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

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

CSS → Прижать футер к низу страницы (sticky footer)

Способ прижатия футера с помощью flexbox.


Комментарии

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

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

height: auto !important;
height: 100%; дубль , переопределение правил.

это хак, а не дубль

и где про этот хак почитать? срабатывать должно последнее свойство.

IE засрал пример во всех своих версиях (если изменять размеры по вертикали — футер не двигается)

проверил в IE9, всё нормально

Антон Кондратов, чт 21/04/2011 — 22:09 #

По мне лучше так:

html, body <
height: 100%;
margin: 0;
padding: 0;
>
.wrapper <
margin: 0 0 100px 0;
>
.footer-push, .footer <
height: 100px;
position: absolute;
bottom: 0;
>

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

какой тогда метод хорош с аккордеоном?

Извините за возможный глупый вопрос. Я не ставил не в body не в wrapper отступов, а поставил для хедера, который вложен (как было сказано). Но все поломалось таки. Я решил проблему созданием еще одного класса над хедером, который служит отступом. Есть варианты проще?

Добрый день! Подскажите, пожалуйста, как прижать футер к низу в теме at_subtheme — подтеме Adaptive Theme. В настройках темы не нашел как это сделать, с помощью правки CSS тоже не смог. Сделал как у Вас написано.

Всё хорошо, кроме того, что высота футера задана жёстко ;)

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

Спасибо за рецепт! Работает :)


Здравствуйте, уважаемый xandeadx.
Спасибо за полезные статьи на вашем сайте и за ценные комментарии на форуме drupal.ru
Хочу попросить вас попробовать разобраться и предложить решение проблемы, связанной непосредственно с темой данной статьи и приведенного вами способа фиксировать подвал к нижней границе окна браузера.
Проблема наблюдается при использовании плагина fancybox, а проявляется в скачке/прокрутке страницы в самый верх при вызове метода fancybox (клике на ссылку с классом fancybox).
Конфликтной точкой является стиль css: html, body который используется в данном способе.
Способ, описанный в статье, я считаю самым лучшим, давно его использую и не очень хочу переходить на другие, к примеру с применением position.

С уважением, Igor Webpages.

не сталкивался с такой проблемой

При в ИЕ 8 при ресайзе за нижнюю границу подвал залипает на месте.

При [!DOCTYPE html] в ИЕ 8 при ресайзе за нижнюю границу подвал залипает на месте.

IE8 не поддерживает HTML5. Пишите DOCTYPE от XHML и т.п.
P.S. И не используйте этот чертов IE. Все в Chrome!

Здравствуйте! Помогите пожалуйста, есть сайт http://draftmann.com, не могу прижать футер, пришлось задать для контента min-height:800px; но это не привильно, для тегов html, body, ставлю height:100%, но когда ставлю для обертки yt_wrapper — height:100% все работает, но только на тех страницах где контент не превышает размер экрана, а все что выходит за пределы экрана обрезается, полоса прокрутки пропадает. Спасибо.

подскажите, пожалуйста, почему если задаю у body min-width: 1250px; на устройствах где высота больше ширины, все летит в тартарары? height: 100% перестает работать, футер повисает где-то в воздухе, под ним разные артефакты

Прошу прощения за, возможно, глупый вопрос, я только начинающий, но почему нельзя просто задать футеру position:relative;bottom:0; ? Разве проблема не становится решенной?

position: relative;
bottom: 0;

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

footer <
position: relative;
bottom: 0;
>

В этом случае футер упадет вниз, но «body» чаще всего делают резиновым, а не фиксированным.

Есть вариант делать так:

section <
height: inherit;
>

footer <
position: absolute;
bottom: 0;
>

или же заменить position: absolute; на position: fixed; смотря как вам нужнее. В этом случае «body» резиновый.

Есть еще хороший вариант, это использовать flex-box. Но на данный момент там есть подводные камни.

html <
min-height: 100%;
display: flex;
flex-direction: column;
>

body <
display: flex;
flex-direction: column;
flex: auto;
>

section <
flex-grow: 1; /*говорит о том, что данный блок займет все свободное пространство*/
>

Как привязать футер к низу страницы

Сегодня найдем окончательное надежное решение вопроса как средствами css прижать футер к низу страницы с помощью css и html. Притянуть футер низ страницы. Также этим способом можно отцентровать контент content по середине страницы.

Для того чтобы прижать footer к низу страницы нужно создать определенную структуру html:

После того как структура страницы готова, приступаем к настройке css.

Нам нужно сделать так чтобы html и body занимали всю высоту страницы (full screen height). А блок wrapper имел минимально высоту экрана, а контент его бы растягивал как нужно. Дальше нам нужно прижать футер к низу страницы или к низу экрана так чтобы он всегда оставался ниже контента, а если контента мало но футер прижимается в низу экрана. Также контенту нужно сделать отступ внизу для футера.

Прижать футер к низу экрана css код:

Этот способ работает только в случае фиксированного футера. Это означает что footer прижать к низу страницы будет сложнее если высота его динамическая, так как надо будет предусмотреть правильный нижний отступ для div с классом main. Тут уже нужен будет javascript и понадобится информация как в мобильном браузере получить высоту экрана.

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

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

Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих