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

Содержание: Вступление Первый способ Второй способ Третий способ Четвертый способ Пятый способ (самый актуальный) к содержанию ↑Вступление Помнится мне, в тот момент, когда я стал переходить с таблиц на верстку дивами, одной из трудностей, с которыми я столкнулся, была следующая — как прижать ...

Комментарии (135)
  1. 1
    lilxxl

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

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

  2. 2
    Tekuto

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


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

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

  3. 5
    Tekuto

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

  4. 6
    Владислав

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

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

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

  5. 7
    Саня

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

    8

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

  6. 9
    Clause

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

    html, body {height: 100%;}

    для футера

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

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

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

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

  7. 10
    Бабай

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

  8. 12
    Бабай

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

  9. 13
    VitaliyAT

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

  10. 15
    Assanali

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

  11. 16
    Павел

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

  12. 17
    Ольга

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

  13. 18
    Елена

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

  14. 19
    alex.mirrr

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

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

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

  15. 21
    Иван

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

  16. 22
    Дмитрий

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

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

  17. 23

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

  18. 24
    Taras

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

  19. 25
    Евшений

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

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