Главная CSS-верстка

Как с помощью CSS прижать footer к низу окна браузера

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

Комментарии (161)

  1. не понравился ни первый ни второй способ, как-то все слишком сложно =\
    как оказалось чтобы прижать футер к низу достаточно прописать в футере

    ааааааааааааа!!! спасибо, работает! (у как я мучалась…)

  2. Зачем так сложно?
    Разве так недостаточно?


    #footer {
    position: absolute;
    bottom: 0;
    }

    Все работает нормально. Проверил на опере, лисе и осле.

  3. Верно)
    Моя оплошность)

  4. Добрый день. Почитал я коменты и дивлюсь нашим современным веб прогерам, на ком же инет держится.
    Все у них плывет в джумле. Вот мой совет; - «а вы не используйте джумлу ;-)»
    clear: both; исспользуют и радуются… Ужас. Используйте вы overflow: hidden; и не плодите лишних сушностей.

    Вот ответ на один из постов:
    position: relative; во втором способе для ie6.

    З.ы. я лично зашел сюда, потому что забыл последовательность указания высот в 1.2 способе, которым я только и пользуюсь.

  5. В моём видении, лишний

    Спасибо огромное, добрый человек!
    Первый способ пригодился.

  6. Я только использовал

    html, body {height: 100%;}

    для футера

    #footer {position: relative; height: 80px; margin-top: -80px;}

    (кто еще в танке поясню! если высота футера 50px то нужно писать в margin-top: -50px)
    а для контейнера я использовал

    #content {position: relative; height: 100%;}

    И все получилось!

  7. Дайте же кто-нибудь ссвлку на трехколоночный шаблон. Желательно резиновый. А то не силен в этих кодах.

  8. Это же надо собирать, а пример готового нет, чтобы виджеты можно было бы поставить.

  9. Это прижатие к низу страницы? а что если надо прижать к низу окна. Чтоб футер был внизу всегда, а контент можно было крутить вертеть.

  10. спасибо большое, очень помогло

  11. Здравствуйте! Помогите пожалуйста, есть сайт draftmann.com, не могу прижать футер, пришлось задать для контента min-height:800px; но это не привильно, для тегов html, body, ставлю height:100%, но когда ставлю для обертки yt_wrapper — height:100% все работает, но только на тех страницах где контент не превышает размер экрана, а все что выходит за пределы экрана обрезается, полоса прокрутки пропадает. Спасибо.

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

  13. Я уже 3 дня бьюсь над решением этой задачи. 1 и 2 способы прижимают футер на главной странице с анонсами постов, на страницах и одиночной записи футер уходит вверх. 4 способ наконец то решил задачу, посмотрела в разных браузерах — хорошо, но рано радовалась. Вернулась на главную, а там поломка — футер расположился посреди окна.

  14. В четвертом способе конечно же:

    min-height: calc(100vh - 80px);
    

    В примере тоже лучше поправить:
    i.imgur.com/YUPKwey.png

  15. Спасибо! второй способ работает

  16. Четвертый способ решает! Автор, спасибо!

    p. s. Прости, e-mail левый)

  17. Спасибо большое! Первый способ помог!

  18. Спасибо)
    все способы хороши

  19. Благодарю, помогла статья, сделал через 2й способ=)

Ваш комментарий