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

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

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

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

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

Оценить 1 комментарий

  • Facebook
  • Вконтакте
  • Twitter

abyrkov

  • Facebook
  • Вконтакте
  • Twitter

andrhohlov

  • Facebook
  • Вконтакте
  • Twitter

loratokareva

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

  • Facebook
  • Вконтакте
  • Twitter

не бойся добавить обертку к разметке, от этого никто еще не умер.
есть всего 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 (подвал сайта) к низу окна браузера

Как прижать footer (подал сайта) к низу окна браузера

Как вы хотите уменьшить подвал, если он у вас не пустой? Уберите меню и будет вам поменьше.

Спасибо, комемнтарий добавлять не надо…

Подскажите, а как сделать что бы контент и колонки тянулись до футера, даже когда контента мало ?

Имеете ввиду, чтобы блоки контента и сайдбара тянулись?

Зачем столько лишних элементов? Зачем всякие отрицательные отступы и прочая ересь? Если есть цель сделать подвал фиксированной высоты, то вот самое простое решение http://mystrd.at/modern-clean-css-sticky-footer/
Если добавить
height: 100%; height: auto !important;
перед min-height, будет даже в старых ИЕ работать.

P.S. Вроде сайты пишешь и раскручиваешь, а я, как обычный посетитель, не смог найти способа форматирования комментария (вставить код, например). Это, как минимум, странно…

Данный метод не подходит, не буду писать зачем, что и т.д. Просто скажу — не подходит и все. Знаете сколько я перепробовал и остановился именно на том, что выложен выше.
P.S. Кто вам сказал, что я сайту пишу? Я готовые cms использую, я вообще верстальщик, а не программист. Не знаю что вам там странным показалось…

Просто вы жаловались, что никто не показывает другие методы. Я показал. Жаль, что вы не хотите рассказать про его минусы. Хотелось бы конструктивной критики.
Вы же писали про html5, про семантику, однако ваш метод эту семантику нарушает. Остальные минусы я уже называл.

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

Приятно конечно, что вы читаете блог, но я ни на что не жаловался, просто кое кто умничал много. Вообще, содержание вышеприведенной статьи я никому не навязываю.
Эти два метода идентичны по сути, ничего страшного в отрицательном отступе нет. Просто дополнительный блок — #substrate-footer выручает в некоторых случаях.
Не понимаю какую семантику нарушает данный метод — то, что теги обычные div? Мы же здесь не html5 изучаем. Да и вообще статья опубликована почти год назад.
В комментах wordpress гостям добавлять код запрещено по умолчанию. Здесь надо искать дополнительные методы.
Вы, прежде чем камнями кидаться, спросите сначала сколько сайтов я обслуживаю и если у меня дополнительные заботы помимо этого блога.
То, что нет кнопки «Цитировать» мне и самому не радостно, просто некоторые вещи в wordpress меня просто бесят, в том числе и комментарии. Я больше привык с joomla работать.

Как прижать футер (подвал) к низу

Хорошим тоном является заполнение сайтом всей доступной области экрана браузера (как минимум по высоте для статичных по ширине дизайнов).

футер не прижат к низуЧасто при не прижатом подвале сайт смотрится странно Подвал прижат к низуСовсем другое дело, когда задумка дизайнера точно передана

Решение

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

Шаг 1

Делаем 2 блока: основной (main) и подвал (footer). Основной контейнер растягиваем на всю высоту экрана браузера (min-height), подвалу жестко указываем высоту (height).

Прижимаем подвал к низу - шаг 1

При этом общая высота сайта составит высота экрана + высота подвала.

Шаг 2

Отрицательным отступом (margin-top) "въезжаем" в основной блок, чтобы высота сайта составляла только 100% высоты экрана.

Прижимаем подвал к низу - шаг 2

При таком расположении блоков и при достаточном количестве контента (например, текста) в основном блоке, возможны накладки контента в основном блоке на подвал:

Прижимаем подвал к низу - потенциальная проблема

Шаг 3

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

Прижимаем footer к низу - шаг 3

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

Смотрим как это выглядит в коде:

Заметка: при использовании блочной верстки и плавающих основных блоков (колонок) для .hFooter следует добавить clear: both, чтобы подвал расположился под колонками.:

    6-8 2-3 9.5 3.1

Заметка 1: Если ты уже немного освоил CSS, тогда может возникнуть вопрос: " Зачем использовать дополнительный элемент, если можно воспользоваться padding-bottom?". Ответ — так просто его тут использовать нельзя, т.к. размер блока равен его ширине и высоте + сумме внутренних отступов + сумме толщин бордюров. Связка min-height: 100% и padding-bottom даст высоту сайта больше высоты экрана. В итоге даже при отсутствии контента вовсе, подвал будет за пределами "первого экрана". Как это можно обойти смотри ниже.

Заметка 2. В Opera версии 9.5 и выше при добавлении doctype этот пример не сработает. Варианты обхода:

    добавить в основной тег-контейнер хотя бы один плавающий блок:

update 8.12.09 — Недостаток данного приема

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

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

update 28.12.09 — проблемы с z-слоями

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

всплывающее окно в main

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

всплывающее окно в main

Вариант 1 — искать возможность позиционировать окно не относительно main, а относительно какого-либо другого дочернего элемента, который расположен в main. Таким образом, избавимся от указания z-index для main и footer. Но такой вариант не всегда возможен, потому рассмотрим второй вариант прижатия футера.

Решение 2 — абсолютное позиционирование

Идея похожа на решение 1:

  1. растягиваем основной блок на всю всот экрана
  2. резервируем место для подвала
  3. относительно основного блока позиционируем подвал в самый низ абсолютным позиционированием

Такой подход решит проблему с всплывающими окнами, т.к. и footer и popup будут иметь общего родителя, а значит с z-слоями сюрпризов не будет.

Недостаток обоих методов

update: 12.07.2010 Оба метода годятся только для фиксированного по высоте подвала.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *