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

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

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

  1. Спасибо автору! Помог 4-й способ.

  2. Огромное спасибо!!
    Пятый способ — супер!

  3. https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ — по мне так один из лучших способов

  4. <div style="position: relevate; background-color:#00F; padding:0">
    	<div id="content"style="height: auto;  background-color: #F00; padding: 12px  ">
    		100% резиновый без проблемный блок.<br>
    	  Комбинируя position relevate и absolute <br>
      - можно выровнять как угодно и что угодно.
    	</div>
    	<div id="content" style="position:absolute; bottom:0; height:50px;width:100%;  background-color: #0FA; padding: 10px;text-align:center;   ">
    	Прижатый к боттому блок. Высотой 50px. 
    	</div>
    </div>
  5. Я сделал по-другому. Wrapper поставил 100vh и display: grid. И всё.

  6. Добрый день.

    Спасибо огромное!!!

    В случае с iPad Wi-Fi (Safari & Chrome) помог 3-й способ. Причем, 3-й способ решил вопрос не только с футером, пофиксался неприятный баг с высотой DIV-ов (верстка на флекс боксе).

    С уважением,
    Игорь

  7. Способ с гридами:

    
    html,
    body {
      height: 100%;
    }
    .wrapper {
      height: 100%;
      display: grid;
      grid-template-rows: 1fr auto;
    }
    
  8. Люди которые пишут про гриды, вы вообще в курсе что гриды вообще не поддерживает IE на котором сидит около 20% пользователей.

  9. Доля IE вместе с Edge около 8-9%, забудьте про них.

  10. Спасибо! Флекс прямо то, что нужно. Интересно, почему его так поздно добавили, ведь интерфейсы на HTML делались всё время

  11. В последнем методе, который САМЫЙ АКТУАЛЬНЫЙ — явная ошибка. Для wrapper необходимо указать min-height, а не height, что бы он тянулся вниз, при необходимости.

  12. нужен футер, который всегда на экране, скроллировался только контент, но не футер. «position: fixed» не подходит по объективной причине — футер с ним вываливается из общего потока, совсем, а мне необходимо, чтоб ширина футера зависела от ширина родителя, задавать дважды ширину — для родителя и футера, — не комильфо. в этом плане подошел бы «position: sticky», но при малом контенте он никуда не приливает.

    • кароче. написал и сам же через 5 минут нашёл решение. «position: sticky» — то, что нужно, но чтобы работало при малом контенте: родитель «display: flex; flex-direction: column;», а футер «margin-top: auto»

  13. при наличии других элементов типа form, div, p все идет наперекосяк, т.е. футер прилипает к контенту

  14. Отлично! Эту статью и искал. Как раз интересовало, как прижать футер к низу, не используя flex (способы 1-4). Спасибо большое!

  15. Не знаю почему, но с обычным блоками коряво работает. Выставляя html и body в 100%, размер блока занимал размер окна. Стоило залить контентом почему-то контент вылазил за этот блок. Пока контента нет футер внизу, как появляется контент и имеется скрол то при скроле футер поднимается, вообщем блок body не захватывал контент. display: grid решил проблему

  16. Еще один способ.

    .clear { clear: both;}

    #footer {
    background: #A9A9A9;/*меняем по желанию*/
    width: auto;
    height: 50px;/*меняем по желанию*/
    color: #ffc;/*меняем по желанию*/
    padding-top: 2px;
    border-radius: 10px;/*меняем по желанию*/
    border-style: double;/*меняем по желанию*/
    margin-top: 5px;/*меняем по желанию*/
    }

  17. Отличное решение (то, что №5). Спасибо.

  18. 5 способ помог. Спасибо.

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