Как с помощью 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%;}И все получилось!
Дайте же кто нибудь ссвлку на трехколоночный шаблон. Желательно резиновый. А то не силен в этих кодах.
https://dimox.name/3_column_css_layout/
http://csstemplater.com/
Это же надо собирать , а пример готового нет, чтобы виджеты можно было бы поставить.
Это прижатие к низу страницы? а что если надо прижать к низу окна. Чтоб футер был внизу всегда а контент можно было крутить вертеть.
position: fixed и bottom: 0 для футера
+ не забыть сделать нижний паддинг контенту, равный высоте футера, чтобы информация не скрылась под футером
спасибо большое, очень помогло
Здравствуйте! Помогите пожалуйста, есть сайт http://draftmann.com, не могу прижать футер, пришлось задать для контента min-height:800px; но это не привильно, для тегов html, body, ставлю height:100%, но когда ставлю для обертки yt_wrapper – height:100% все работает, но только на тех страницах где контент не превышает размер экрана, а все что выходит за пределы экрана обрезается, полоса прокрутки пропадает. Спасибо.
Спасибо большое, самая актуальная на данный момент подборка решений, и главное что это то что нужно! Просто огромное спасибо за Ваш труд
Я уже 3 дня бьюсь над решением этой задачи. 1 и 2 способы прижимают футер на главной странице с анонсами постов, на страницах и одиночной записи футер уходит вверх. 4 способ наконец то решил задачу, посмотрела в разных браузерах – хорошо, но рано радовалась. Вернулась на главную, а там поломка – футер расположился посреди окна.
В четвертом способе конечно же:
В примере тоже лучше поправить:
http://i.imgur.com/YUPKwey.png
Да, действительно. Спасибо, что сообщили.
Спасибо! второй способ работает
Четвертый способ решает! Автор, спасибо!
p.s. Прости, e-mail левый )
Спасибо большое! Первый способ помог!
Спасибо)
все способы хороши
Благодарю, помогла статья, сделал через 2й способ=)