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

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

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

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

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

      • Привет, у меня та же проблема, но я не совсем понял твоё решение. Напиши мне, пожалуйста, на почту, я тогда скрин прикреплю что бы быть на 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;
        }
        
      • Отбой, разобрался) Четвёртый способ идеально мне помог) Спасибо автору)

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

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

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

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

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

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

  7. еще такой способ существует(с помощью тега 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>
    
    
    
    
    • Использовать таблицу для разметки — уже давно считается дурным тоном. Так делали в 2000-х годах.

      • где дурной тон? — почитай статью внимательно — в ней 3й способ основан именно на свойствах таблиц, только там не тег table, а блочным элементам задается свойство display — table и table-row, но принцип такой же — основан на свойствах тех же самых таблиц.

        • почитай статью внимательно

          Мне свою статью внимательно почитать? Думаешь, я не знаю, о чем писал?

          только там не тег table

          В том-то и дело, что у меня не используется тег table, т.к. он предназначен для табличных данных, иначе нарушается семантика кода.

    • тег Table лучше не использовать, если нравится такой способ, то верстай на div и через css потом указывай контейнеру display: table; ну и так далее

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

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

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

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

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

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

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

    Просто прописал в 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. Спасибо ! Сейчас использовал четвертый способ . Завтра посмотрим как у других отображается

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

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

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

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

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

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

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