Как с помощью CSS прижать footer к низу окна браузера
Вступление Помнится мне, в тот момент, когда я стал переходить с таблиц на верстку дивами, одной из трудностей, с которыми я столкнулся, была следующая - как прижать подвал сайта (footer) в самый низ окна браузера, чтобы страница при этом выглядела вытянутой на всю высоту, ...
Комментарии (161)
Спасибо автору! Помог 4-й способ.
Огромное спасибо!!
Пятый способ – супер!
https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ – по мне так один из лучших способов
там фиксация при прокрутке
Здравствуйте!
Благодарю! Правда, простое и эффективное решение.
Всего доброго.
Супер, спасибо. (в 5 способе футер всегда под экраном, даже если контента нет)
Большое спасибо!!!
Отлично подошёл способ, указанный в ссылке. Самый идеальный. Хорошо что нет фиксированной высоты.
это яркий пример говнокода, не делайте так!
Я сделал по-другому. Wrapper поставил 100vh и display: grid. И всё.
Добрый день.
Спасибо огромное!!!
В случае с iPad Wi-Fi (Safari & Chrome) помог 3-й способ. Причем, 3-й способ решил вопрос не только с футером, пофиксался неприятный баг с высотой DIV-ов (верстка на флекс боксе).
С уважением,
Игорь
Способ с гридами:
Люди которые пишут про гриды, вы вообще в курсе что гриды вообще не поддерживает IE на котором сидит около 20% пользователей.
Доля IE вместе с Edge около 8-9%, забудьте про них.
Спасибо! Флекс прямо то, что нужно. Интересно, почему его так поздно добавили, ведь интерфейсы на HTML делались всё время
В последнем методе, который САМЫЙ АКТУАЛЬНЫЙ – явная ошибка. Для wrapper необходимо указать min-height, а не height, что бы он тянулся вниз, при необходимости.
Действительно. Спасибо, исправил.
нужен футер, который всегда на экране, скроллировался только контент, но не футер. “position: fixed” не подходит по объективной причине — футер с ним вываливается из общего потока, совсем, а мне необходимо, чтоб ширина футера зависела от ширина родителя, задавать дважды ширину — для родителя и футера, — не комильфо. в этом плане подошел бы “position: sticky”, но при малом контенте он никуда не приливает.
кароче. написал и сам же через 5 минут нашёл решение. “position: sticky” — то, что нужно, но чтобы работало при малом контенте: родитель “display: flex; flex-direction: column;”, а футер “margin-top: auto”
при наличии других элементов типа form, div, p все идет наперекосяк, т.е. футер прилипает к контенту
Отлично! Эту статью и искал. Как раз интересовало, как прижать футер к низу, не используя flex (способы 1-4). Спасибо большое!
Не знаю почему, но с обычным блоками коряво работает. Выставляя html и body в 100%, размер блока занимал размер окна. Стоило залить контентом почему-то контент вылазил за этот блок. Пока контента нет футер внизу, как появляется контент и имеется скрол то при скроле футер поднимается, вообщем блок body не захватывал контент. display: grid решил проблему
Еще один способ.
.clear { clear: both;}
#footer {
background: #A9A9A9;/*меняем по желанию*/
width: auto;
height: 50px;/*меняем по желанию*/
color: #ffc;/*меняем по желанию*/
padding-top: 2px;
border-radius: 10px;/*меняем по желанию*/
border-style: double;/*меняем по желанию*/
margin-top: 5px;/*меняем по желанию*/
}
Отличное решение (то, что №5). Спасибо.
5 способ помог. Спасибо.
Помог 4й способ, спасибо! Но я не вычитал высоту футера,
а просто поставил min-height: 60vh; ну или сколько кому нужно.