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

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

Комментарии (136)
  1. 1
    Виталий

    спасибо большое , понравился первый способ

    • 2
      Михаил

      При использовании первых двух способов были проблемы в Опере и Хроме. При открытии страницы с контентом больше окна браузера футер наслаивался на контент, а потом при прокрутке вместе с ним ехал вверх. В Лисе всё нормально работало. Временно решил проблему следующим способом:
      html, body, .wrapper {
      height: 100%;
      }
      #content {
      min-height: 71%;
      }
      Просто увеличиваем минимально возможную высоту контента так, чтобы футер находился внизу, как и положено. Проценты подбираются вживую через консоль, значение зависит от высоты футера. Способ хорошо работает на полностью развёрнутых окнах, при уменьшении окна появляется прокрутка, но лично я не знаю людей, работающих на полуоткрытом браузере. Возможно, на других мониторах тоже будут свои нюанты, но это в любом случае лучше, чем задранный на середину окна футер.

      • 3
        Миша

        Привет, у меня та же проблема, но я не совсем понял твоё решение. Напиши мне, пожалуйста, на почту, я тогда скрин прикреплю что бы быть на 100% уверенным что проблема та же. Мой: mihail.levin.1999@mail.ru Вкратце: есть header и footer. Они примерно как в вк — синие и на всю ширину. Header (шапка) как и положено, прикреплена к самому верху и если текста больше чем высота окна, то при прокрутке она пропадает. Тут всё ок. Проблема с «подвалом». Я не могу добиться того, что бы он был в самом низу страницы и при этом (!), если текста больше чем высота окна, НЕ был виден (не fixed!) пока мы наверху страницы, а показывался только при прокрутке вниз. А проблема у меня, что если текста много, он при дальнейшей прокрутке сидит по середине окна. (со скрином понятнее будет). Жду твоего ответа)
        Если что, вот стили CSS к нему:

        footer {
        	background: #5578A2;
        	bottom: 0px;
        	height: 45px;
        	position: absolute;
        	left: 0;
        	right: 0;
        
        	color: white;
        	font-size: 30px;
        	font-family: "Comic Sans MS";
        	text-align: center;
        }
        
      • 4
        Миша

        Отбой, разобрался) Четвёртый способ идеально мне помог) Спасибо автору)

  2. 5
    Сергей

    Спасибо! Использовал второй способ.

  3. 6

    Третий способ дает баг таблицам, если их делать прокручиваемыми по горизонтали на мобильных устройствах. Вся страница не сжимается меньше чем на ширину контейнера =((

    Думаю, как решить эту проблему…

  4. 8

    Спасибо! Воспользовался первым способом.

  5. 9
    Олег

    Спасибо, способ хороший. У меня один только вопрос, а что делать когда появляется админбар и портит всю картину тем что футер становится ниже на 32 пикселя? может подскажете решение?

  6. 10
    Юля

    Автору огромное спасибо! Подошел третий способ, единственное, добавила еще к wrapper ширину 100%, иначе контент съезжал влево.

  7. 11
    igugigu

    еще такой способ существует(с помощью тега table):

    
    <!DOCTYPE html>
    <html>
    
    <head>
     <style type="text/css">
     body,html{
     height:100%;
     }
     </style>
    </head>
    
    <body leftmargin="0" rightmargin="0" topmargin="0" bottommargin="0">
    
    <table width="100%" height="100%">
    <tr><td height="300px" style="background-color:#fcf;"></td></tr>
    <tr><td>content</td></tr>
    <tr><td height="300px" style="background-color:#fcf;"></td></tr>
    </table>
    
    </body>
    
    </html>
    
    
    
    
  8. 16
    Виктор

    Использовал первый способ, т.к нужна кроссбраузерная верстка. А во всех остальных способах присутствуют стили которые не поддерживаются IE от 6 до 10 версии

  9. 17
    Алекс

    Спасибо — третий способ отлично подошёл!

  10. 18
    Gul

    И мне третий подошел! Большое спасибо, автор!

  11. 19
    Александр

    Третий способ — лучший для меня выход. Спасибо за статью, и за демки — в частности, иначе бы пришлось на веру все воспринимать :)

  12. 20
    Артем

    Всем привет! Надеюсь сможете помочь! Использовал 5-й способ, другие не подходили.. И все бы супер, НО на айпаде через сафари и хром футер оказывается внизу видимой части страницы. Видно где-то треть, остальное появляется при прокрутке — футер статичен и наложен на контент, т.е. при прокрутке страницы прокручивается вместе с содержимым. Как можно решить данную проблему? Или это баг айоса? К сожалению, проверить работоспособность сайта на макбуке сейчас не могу, как думаете там тоже косяк этот вылезет или не должен? На айфоне все работает, на паре смартфонов под Андройдом тоже все ок, на разных ноутах проблема также отсутствует. Буду благодарен за помощь!

  13. 21

    Спасибо, частично помог третий способ, т.к. у меня разметка создана с помощью самой таблицы. Просто я ее забыл height поставить в 100%, поэтому и не получалось сделать.

  14. 22

    Мне помог такой способ

    Просто прописал в CSS (WordPress, тема Zerif Lite Responsive Boat)

    #footer {
    background: rgba(39, 39, 39, 0.95) none repeat scroll 0% 0%;
    position: fixed;
    bottom: 0;
    width: 100%;

    }

  15. 23
    Юрий

    Спасибо ! Сейчас использовал четвертый способ . Завтра посмотрим как у других отображается

  16. 24
    Сергей

    Как с пятым способом растянуть футер сайта по ширине окна? В примере футер находится внутри wrapper, а сайт у меня 980px, футер соответсвенно тоже.

  17. 25

    Всем привет!
    Возникает большая проблема с фиксированным низом если сверху есть фиксированный элемент.
    Для примера возьмём этот скрипт: ScrollToFixed
    https://github.com/bigspotteddog/ScrollToFixed

    Если использовать атрибут:
    html,
    body { height: 100%; }
    То вся фиксация сводится на нет.
    Испробовал уже несколько разных скриптов.

  18. 26
    Макс

    спасибо большое. 4 способ помог!

  19. 27
    Ника

    ну.. и .. где нажать на соцкнопки? где поделиться публикацией?
    Супер, круто, спасибо!

  20. 28
    Дмитрий

    Спасибо! 4-й помог!

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