Как прижать footer к низу страницы css

Как прижать footer к низу экрана?

Есть основной блок <div > с контентом различной высоты, а под ним размещён футер.

Если контент не достигает всей высоты экрана, нужно чтобы минимальная высота .container занимала свободное место окна браузера. При этом футер должен быть внизу страницы и оставаться видимым.

Футер может менять высоту, но при этом он должен оставаться прижатым к нижнему краю окна браузера.

Для прижатия футера к низу экрана, есть несколько решений. От самого актуального до устаревшего:

1. Решение через Grid Layout для АДАПТИВНОЙ высоты футера

2. Решение через Flexbox для АДАПТИВНОЙ высоты футера

3. Решение через таблицы для АДАПТИВНОЙ высоты футера

4. Решение на нативном JavaScript для АДАПТИВНОЙ высоты футера

5. Решение через calc() для ФИКСИРОВАННОЙ высоты футера

6. Решение через абсолютное позиционирование для ФИКСИРОВАННОЙ высоты футера

Решение на flexbox .

Более универсальное в плане сопровождаемости, так как не требует задания фиксированной высоты и хаков с position: absolute . Если вам требуется также поддерживать IE 10/11, то решение включающее их поддержку находится в секции "Flexbox для Internet Explorer 10/11".

Случай с контентом на всю оставшуюся высоту:

Если надо чтобы был отступ от контента, но контент не занимал всю высоту, то используйте margin-top: auto для footer :

Flexbox для Internet Explorer 10/11

Для того, чтобы описанные выше способы заработали в IE 10/11 нужно помнить о следующих багах браузеров:

min-height не применяется к элементу с display: flex и flex-direction: column в IE 10-11. Используйте height где это возможно.

Chrome, Opera, and Safari не учитывают минимальный размер контента непосредственных детей контейнера c display: flex . Установите flex-shrink в 0 (вместо значения по умолчанию 1 ) чтобы избежать нежелательного "сжатия".

Случай с контентом на всю оставшуюся высоту:

Если надо чтобы был отступ от контента:

CSS Grid Layout

Случай с контентом на всю оставшуюся высоту:

Если надо чтобы был отступ от контента, но контент не занимал всю высоту, то используйте align-self: start для footer :

CSS Grid Layout для Internet Explorer 10/11

В Internet Explorer 10/11 реализована устаревшая версия модуля CSS Grid Layout. С практической точки зрения это значит, что реализация этого модуля очень сильно разнится от остальных браузеров, которые поддерживают данный модуль.

Самое главное, о чём нужно помнить, что в IE элементы не располагаются по умолчанию по свободным ячейкам по порядку, а просто кладутся друг на друга в самую первую ячейку. То есть в других браузерах значения по умолчанию grid-row : auto и grid-column: auto , тогда как в IE -ms-grid-row : 1 и -ms-column: 1 , поэтому если номер строки или стоблца элемента не совпадают с 1 , то придётся их прописывать по другому.

Оставльное — более тривиально. Часть свойств не поддерживаются (вроде grid-areas , grid-gap и т.д.), часть называются по другому или требуется другой синтаксис и могут иметь отличные умолчания.

Случай с контентом на всю оставшуюся высоту:

Если надо чтобы был отступ от контента, но контент не занимал всю высоту, то используйте align-self: start и -ms-grid-row-align: start для footer :

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

Задача прижать footer к низу окна браузера – это одна из самых часто встречаемых задач при верстке сайта.

В общем, ситуация следующая: на странице есть 3 области header, content и footer (верхняя часть страницы, содержимое и нижняя часть).

Бывают страницы, в которых содержимое занимает совсем немного места и, в итоге, они начинают выглядеть примерно вот так:

04-01-2014 9-04-25

Нижняя часть сайта (footer) прижимается к контенту и внизу страницы остается пустое пространство.

Как избежать этой ситуации? Как прижать footer к низу окна браузера?

В этой заметке хочу поделиться своим опытом в решении этого вопроса.

Итак, имеем следующий HTML-код:

Теперь посмотрите на код CSS, который позволит решить проблему и прижать footer к низу окна браузера.

В общем, теперь страница выглядит вот так:

04-01-2014 9-42-33

Эффект достигается за счет задания элементу html минимальной высоты min-height 100% и относительного позиционирования position:relative.

Для элемента body обязательно нужно задать высоту 100%.

Теперь, когда блок footer будет абсолютно позионироваться относительно низа страницы

он встанет как раз в то место, где заканчивается 100% высоты элемента body.

2 способа прижать футер к нижней части страницы (подходит для IE10 &#038; Edge)

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

Способ первый &#8211; не очень правильный, но часто используемый.

Футер спозиционирован абсолютно и прижат книзу. А для родительского блока задан снизу отступ, равный высоте футера. И поскольку для разных размеров экрана высота футера может быть разно, то высоту футера высчитываем скриптом.

CSS для абсолютного позиционирования футера внизу:

Скрипт для вычисления высоты футера и добавления такого же отступа внизу родительского контейнера:

Пример реализации с абсолютным позиционированием футера:

Способ второй &#8211; правильный, с использованием flex.

Для родительского блока задаем display: flex; направление размещения блоков &#8211; column , и здесь есть 2 варианта:

а) для блока .content , который идет перед .footer задаем flex-shrink: 0 , для того, чтобы этот блок не сжимался, если высота содержимого страницы будет больше 100vh, а для .footer задаем margin-top: auto;

б) для блока .content , который идет перед .footer задаем flex-grow: 1 и flex-shrink: 0 , для того, чтобы этот блок занимал все свободное место и при этом не сжимался., а для футера ничего прописывать не нужно.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *