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

« Предыдущая запись
 
  Следующая запись »
 

Когда-то давно я написал простую подробную статью про трёхколоночную вёрстку и про то, как прижимать футер к низу страницы, а если быть точнее - нижнему краю браузера. Давно было дело. А сегодня меня мой друг попросил скинуть ссылку на ту статейку. И я подумал, а почему бы не поделиться ею здесь, даже не смотря на то, что там всё достаточно ясно.

Не так давно я давал код в статье Как сэкономить время! Заготовка для сайта "Стартовый набор". Собственно то, что будет описано ниже - есть часто того, что было сказано в той статье. Только более подробно и обособлено=).

 

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

Прижимаем footer к низу экрана

<div id="total">
     <div id="content">Просто обычный контент</div>
     <div id="footer_space">&nbsp;</div>
</div>
<div id="footer">
     Просто подвал сайта
</div>
Выделяется всего два главных контейнера: total и footer. Со вторым всё понятно, там будет контент чисто подвала. А вот первый, тут есть хитрость. Мы разделяем его на два: content и footer_space. В первом будет содержаться вся информация сайта (кроме подвала), а второй - он будет резервировать место для подвала сайта.
Посмотрим код стилей.
<style>
html {
height: 100%;
}
body {
min-height:100%;
height: 100%;
}
#total {
height: auto !important;
min-height:100%;
height: 100%;
}
#footer_space {
height: 25px;
clear: both;
}
#footer {
height: 25px;
clear: both;
margin-top: -25px;
}
</style>

Собственно приведены только обязательные стили. Обратите внимание на параметры высоты и отступа в footer_space и footer - в примере они равны 25px. Эти три параметра всегда должны быть равны одному значению, плюс контент в подвале не должен иметь бОльшей высоты.

 

В завершении

Этот способ был оправдан ни один раз, до сих пор им пользуюсь. Однако есть ещё одна маленькая хитрость, касающаяся кроссбраузерности. Иногда нужен подвал достаточной высоты, чтобы в нём приходилось равнять текст по высоте. Естественно лучше всего делать это через padding. И мы начинаем прописывать для тега футера, к примеру, padding-top: 5px. И при этом, поскольку мы по сути увеличили высоту контейнера на 5px, уменьшаем значение height футера на эти же 5px.

Казалось бы всё теперь должно быть окей. А вот нифига. Кажется шестой ишак показывает нам дулю в кармане и в итоге мы видим не то, что нужно. Выход один. В контейнер footer необходимо вложить ещё один контейнер, с каким-то другим именем и вот уже ему задавать padding. Либо таблицу добавлять с вертикальным выравниванием по центру.

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

 

UPD: В 10 опере есть своя приблуда (спасибо svetkin за то, что заметил). Предложенный способ не работает, но будет работать, если вынести все стили в отдельный CSS файл. Так что будьте внимательны=)

, ,

1 звезда2 звезд3 звезд4 звезд5 звезд (голосов: 3, средний: 5.00 из 5)
Понравилась статья или журнал? Подписывайся на продолжение!
Отзывов: 27 на запись

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

  1. Открыл в Opera 10, подвал не прижался к низу экран, открыл в ie6 – прижался!!!! :(

  2. Александр Шуйский
    29/12/2009 at 0:26 Постоянная ссылка Цитировать

    Спасибо большое за то, что обратили внимание! И извините за задержку с ответом, на почту не пришло уведомление=(

    На самом деле для меня стало это откровением, потому что всегда и везде всё работало хорошо. Открыл пару своих сайтов в опере 10, но всё работает как надо, но открываю предложенный пример – всё как вы описали. Стал проверять. Оказалось, что если стили прописаны в самом html-файле, то они десятой оперой не воспринимаются как надо. Если же я выношу все стили в отдельный файл css, то всё становится на свои места и всё работает. Так что вот такая специфика десятой оперы=)

  3. Кстати, если при применении данного способа основной контейнер (total) имеет рамку, то он не будет умещаться на странице. Как решить эту проблему?

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

  5. Вообще разобрался) Надо увеличить высоту footer_space и соответственно margin-top подвала на количество пикселей, равное размеру рамки

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

  7. В IE проверял, только с пятым возникли проблемы. Вообще, ты тут так хорошо объяснил, что я понял всё (я про резервирование места).
    Адрес кинул в аську, но он работает только когда я в сети =)

  8. а с пятый в 99% случаев проблемы, он вообще ничего не знает =))). я сам сейчас верстаю, не акцентируя на 5,5 – потому что таких людей капец мало. я за свою жизнь только одного такого встречал – это моя науч.рук, у которой старый комп в универе стоим с 2000 виндой. В потенциале я думаю скрипт написать простенький, чтобы определял версию браузера и сообщел в случае 5 и 6 ишака, мол, обновите ПО, а то вы уже как динозавры =)

    Спасибо. Стараюсь, чтобы всем понятно было =)

    Ты пока не в сети, позже гляну тогда

  9. Да уже и ие6 многие крупные сайты начинают открыто слать нах =) Ищи меня в сети, тогда ссылка будет доступна

  10. да я бы и ие7 уже начинал посылать, хотя он не самый страшный =)

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

  11. Кстати, у меня почему-то приведённый пример перестал работать в IE8, кроме как в режиме совместимости

  12. Опять ценой бессоной ночи выкурил)
    Если body { font-size }
    задан как 100%, то это чревато глюками в Ie8, когда есть padding у p вложенного в footer
    Замена 100% на пункты помогла добиться единобразного отображения в ie8 и ff3.6

  13. ты используешь font-size в процентах? %) По моему оптимально либо в пикселях, либо пунктах. а непосредственно подвалу верхний и нижний паддинг (а также нижний маргин) лучше вообще не ставить, а если надо – делать вложенные контейнеры. а то вёрстка иногда подлетает в некоторых браузерах

  14. Привет, попробовал пример приведенный выше, при большом заполнении дива с контентом содержимое налезает на подвал. Подскажите что может быть?

    И если подвал делать больше 25px то содержимое контента пишется прямо на подвал. Заранее спасибо за разъяснение.

  15. надо смотреть ваш пример, так как предлагаемый пример полностью рабочий. конечно может в каком-то новом браузере что-то не проходит, надо смотреть, но думаю ошибка в вёрстке. нужен пример и версии браузера
    что касается футера, то высоту надо в трёх местах исправлять,а не в одном – в footer_space высоту height и в footer высоту и отступ height и margin-top. Тогда всё окей

  16. а у меня появляется вертикальный скроллер…не пойму почему

  17. именно в предложенном примере? а браузер какой?

  18. Как раз то, что искал! Огромное спасибо)

    p.s. уже с месяц читаю Ваш блог, надо бы зарегистрироваться, да времени не нахожу))

  19. Всегда пожалуйста! =)
    И не забывай про RSS ;)

  20. Не хочет становится красиво в моей кривой верстке Т_Т

  21. Хотя поставил немного по иному и запахало.Спасибо! За это я внесу свой, хоть и убогий, но вклад) (потом покажу >>>)

  22. Пожалуйста =)
    А на иной код глянул бы. Желательно онлайн-пример, проще изучить =)

  23. Не отдам код :P Я удалил это позорище, но бага в IE6, футер улетает в хэдер)

  24. хы)
    странный баг…

  25. Все четко описано. С мнением аудита согласуется. Спасибо. Пошел создавать.

  26. Спасибо, наконец нашел действительно хороший способ! :)

  27. Александр Шуйский
    13/10/2013 at 11:28 Постоянная ссылка Цитировать

    ю а велкам! сам до сих пор именно его и использую =)

Добро пожаловать, коллега! Вы можете оставить свой отзыв:





Допустимые XHTML-теги:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Подписка на комментарии