Как с помощью CSS прижать footer к низу окна браузера
Вступление Помнится мне, в тот момент, когда я стал переходить с таблиц на верстку дивами, одной из трудностей, с которыми я столкнулся, была следующая - как прижать подвал сайта (footer) в самый низ окна браузера, чтобы страница при этом выглядела вытянутой на всю высоту, ...
Комментарии (161)
не понравился ни первый ни второй способ, как-то все слишком сложно =\
как оказалось чтобы прижать футер к низу достаточно прописать в футере
ааааааааааааа!!! спасибо, работает! (у как я мучалась…)
Зачем так сложно?
Разве так недостаточно?
#footer {
position: absolute;
bottom: 0;
}
Все работает нормально. Проверил на опере, лисе и осле.
Сразу видно неопытного и непрозорливого верстальщика))
Прижмете вы абсолютно футер высотой в 100пх к низу экрана, ок. А что делать с тем, что он перекрывает на 100пх зону контента?
так контент будет игнорировать присутствие футера. чё вы
Верно)
Моя оплошность)
Добрый день. Почитал я коменты и дивлюсь нашим современным веб прогерам, на ком же инет держится.
Все у них плывет в джумле. Вот мой совет; - «а вы не используйте джумлу ;-)»
clear: both; исспользуют и радуются… Ужас. Используйте вы overflow: hidden; и не плодите лишних сушностей.
Вот ответ на один из постов:
position: relative; во втором способе для ie6.
З.ы. я лично зашел сюда, потому что забыл последовательность указания высот в 1.2 способе, которым я только и пользуюсь.
В моём видении, лишний
Спасибо огромное, добрый человек!
Первый способ пригодился.
Я только использовал
html, body {height: 100%;}
для футера
#footer {position: relative; height: 80px; margin-top: -80px;}
(кто еще в танке поясню! если высота футера 50px то нужно писать в margin-top: -50px)
а для контейнера я использовал
#content {position: relative; height: 100%;}
И все получилось!
Дайте же кто-нибудь ссвлку на трехколоночный шаблон. Желательно резиновый. А то не силен в этих кодах.
dimox.name/3_column_css_layout/
http://csstemplater.com/
Это же надо собирать, а пример готового нет, чтобы виджеты можно было бы поставить.
Это прижатие к низу страницы? а что если надо прижать к низу окна. Чтоб футер был внизу всегда, а контент можно было крутить вертеть.
position: fixed и bottom: 0 для футера
+ не забыть сделать нижний паддинг контенту, равный высоте футера, чтобы информация не скрылась под футером
спасибо большое, очень помогло
Здравствуйте! Помогите пожалуйста, есть сайт draftmann.com, не могу прижать футер, пришлось задать для контента min-height:800px; но это не привильно, для тегов html, body, ставлю height:100%, но когда ставлю для обертки yt_wrapper — height:100% все работает, но только на тех страницах где контент не превышает размер экрана, а все что выходит за пределы экрана обрезается, полоса прокрутки пропадает. Спасибо.
Спасибо большое, самая актуальная на данный момент подборка решений, и главное что это то что нужно! Просто огромное спасибо за Ваш труд
Я уже 3 дня бьюсь над решением этой задачи. 1 и 2 способы прижимают футер на главной странице с анонсами постов, на страницах и одиночной записи футер уходит вверх. 4 способ наконец то решил задачу, посмотрела в разных браузерах — хорошо, но рано радовалась. Вернулась на главную, а там поломка — футер расположился посреди окна.
В четвертом способе конечно же:
В примере тоже лучше поправить:
i.imgur.com/YUPKwey.png
Да, действительно. Спасибо, что сообщили.
Спасибо! второй способ работает
Четвертый способ решает! Автор, спасибо!
Спасибо большое! Первый способ помог!
Спасибо)
все способы хороши
Благодарю, помогла статья, сделал через 2й способ=)