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


Содержание

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

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

В каждом из примеров будем отталкиваться от того, что макет сайта имеет такую обычную структуру (ваш макет может отличаться, но способы универсальные):

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

Прижать футер к низу с помощью позиционирования

Описание примера

  1. Все блоки макета были заключены в дополнительный блок-обертку > «wrapper» , которому задали минимальную высоту (свойство CSS min-height) равную 100%, чтобы он растянулся во всю высоту окна браузера, но если потребуется, то мог тянуться и дальше. Однако так как процентные значения считаются относительно предка, то чтобы все сработало, пришлось явно указать высоту (CSS height) для тегов и .
  2. Следующим шагом стало абсолютное позиционирование (CSS position) футера относительно оберточного блока к его нижней стороне (CSS bottom). Таким образом, футер у нас оказался прижат к нижней части страницы.
  3. Так как абсолютное позиционирование вырывает элемент из потока, то при добавлении информации в блоки с контентом и меню, часть ее будет уходить под прижатый футер. Чтобы этого не произошло, элементам > «content» и > «menu» были установлены нижние внутренние отступы (CSS padding) равные высоте футера. Теперь именно они будут уходить под футер и толкать его вниз.
  4. Так как у нас в макете блок с меню является плавающим (CSS float), то футер все равно его не будет замечать, а, соответственно, меню не будет толкать его вниз. Для исправления этого был создан еще один блок ( > «clear» ), который прерывает обтекание (свойство CSS clear). Кстати, если вы не планируете осуществлять поддержку IE6 и IE7, то можете вместо этого блока применить к последнему блоку перед футером (здесь это «content» ) псевдоэлемент :after и просто у него сделать прерывание обтекания.

В первом пункте было применено свойство CSS для указания минимальной высоты, которое не понимает Internet Explorer 6. Зато он понимает свойство height как раз как минимальную высоту. Также этот браузер в определенных случаях игнорирует правило !important. Эти его две особенности и были использованы в данном примере для создания хака, чтобы заставить его делать то, что надо, не затрагивая другие браузеры.

Прижать футер к низу с помощью дополнительных блоков

Описание примера

  1. Все блоки макета кроме футера были обернуты в дополнительный блок > «wrapper» , которому была задана минимальная высота (CSS min-height) в 100%. Это было сделано для того, чтобы блок-обертка как минимум вытянулся во всю высоту окна браузера, но при необходимости (если содержимого будет много) мог тянуться и дальше. Теперь высота нашей обертки стала равна высоте окна браузера, а высота всей HTML-страницы = высота обертки + высота футера.
  2. В результате действий первого пункта наш футер хоть и прижался к низу страницы, но ушел за нижнюю границу окна браузера, что не хорошо. Чтобы поднять его в зону видимости, для него было задано верхнее отрицательное поле (CSS margin-top) размер которого равен высоте самого футера. Все, футер прижат и находится внизу страницы.
  3. Так как в предыдущем пункте у прижатого футера мы указали верхнее отрицательное поле, то при добавлении информации в блоки с контентом или меню, часть ее будет уходить под этот футер. Чтобы этого избежать был создан еще один блок с > «footer_correct» , высота которого равна (можно сделать даже чуть больше) высоте футера. Таким образом, именно этот корректирующий блок будет уходить под прижатый футер и толкать его вниз, предотвращая скрытие информации.
  4. Корректирующему блоку было добавлено прерывание обтекания (CSS clear), чтобы он не обтек меню, если оно будет превышать высоту контента. Соответственно у самого футера это прерывание обтекания было убрано за ненадобностью.

Как и в первом примере, для IE6 здесь был применен специальный хак, позволяющий задать ему минимальную высоту.

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

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

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

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

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

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

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

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

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

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

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

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

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

Лучший способ прижать футер используя 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!

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

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

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

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

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

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

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

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

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

Прижать блок в низу CSS — как прижать блок к низу

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

Другие статьи на тему CSS3:

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

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

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

На данной странице Вы можете посмотреть страницу, которая создана именно таким образом:

Посмотреть примерСкачать

Если Вы хотите научиться создавать продающие страницы с нуля, а не только подписные, тогда рекомендую свой мини-курс: «Лендинг за 60 минут».

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

1 HTML структура

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

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

2 Стили CSS

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

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

Вывод

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

Если не получается прижать блок к низу: Вы можете обратиться ко мне за помощью, предварительно записавшись на SKYPE консультацию!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

Цукерберг рекомендует:  DevOps интервью с экспертом

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

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

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

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

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

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

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

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

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

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

Теперь нам нужно будет вынести блок футера из общего контейнера и разместить его ниже, сразу же после общего. Что это даст? А то, что, наконец-то, соизволит опуститься вниз футер в макете, а не будет как прежде прижиматься к наиболее длинной его колонке. В этом случае 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»:

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

Добрый день! А подскажите пожалуйста каким образом можно прижать футер книзу страницы, при условии, что футер должен быть частью основного блока, который располагается по центру страницы и сверху/снизу от него должны быть отступы. Пробовал этот способ — не помогло, так как там футер получается отдельно от основного блока, и получается что футер как бы «вываливается». сайт о котором идет речь http://yarrsk.ru/

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

Цукерберг рекомендует:  Анимация в Unity3d (state Machine Mecanim)

upd2! Почему то после того как блок футера превратил в строку таблицы, к нему перестали применяться паддинги и маргины, хз что делать, решил просто обернуть еще в один блок:

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

Последнее время для нормальных браузеров использую flex model для прижатия футера к низу. Заодно растягиваем content часть максимально. Работает везде.
Ссылка

Если футер фиксированного размера, скажем 10em, то можно вот так:

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

Основное правило гласит, что все старшие и соседние элементы страницы должны быть с процентными стилями. Если, конечно, хотите сделать это на CSS без JS. Например, даже футер Хабра прилепляется к низу, если скриптами и юзерстилями записать резметке страницы такие правила. Бывает такая раскладка, что процентные стили расставить будет невозможно.

В Вашем случае — то, что по центру (по горизонтали) — несущественно. А вот Хедер и футер у вас должны быть сделаны 0% высоты, а остальными стилями вставить в них нужную ненулевую высоту блоков. Пример того, как это делается со страницами Хабра, описан здесь: http://habrahabr.ru/post/151320/ чтобы увидеть, как работает — поставить скрипт (лучше на Firefox или старую Оперу, там надёжнее работало) и перейти на короткую страницу, например, эту https://auth.habrahabr.ru/settings/privacy/ (до вчера работали QA, где было много коротких страниц). Так же будут работать и короткие статьи и прочее, например, страница подготовки статьи.

решение нашел, спасибо всем!

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

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

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

Большое спасибо за вашу помощь и внимательность к нам!

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

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

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

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

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

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

Отметим строки с комментариями.
padding-bottom:70px — это внутренний отступ снизу у центральной части и это же число у высоты нижней части (футера) — height:70px. В этом и есть весь секрет. То есть отсупаем от центральной части ровно на высоту самого футера.

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

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; /*говорит о том, что данный блок займет все свободное пространство*/
>

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