Как с помощью css прижать footer к низу окна браузера
Назначение футера заключается в том, что он «прилипает» к нижней части окна браузера. Если на странице достаточно контента, чтобы сдвинуть его, то так и будет. Но если содержимое на странице короткое, тогда футер будет висеть посередине экрана.
Мы покажем 5 способов как можно прижать футер к низу страницы на чистом css
1 Отрицательный margin для wrapper
Создадим два соседних блока wrapper и footer. Для wrapper зададим нижний минусовый отступ равен высоте футера.
Для этого требуется дополнительный элемент внутри wraper (“push”), чтобы гарантировать, что отрицательный margin не подтянет footer и не закроет какой-либо контент.
2 Отрицательный margin для footer
Этот метод не требовал использования элемента push, но вместо этого требовался дополнительный элемент обтекания вокруг содержимого, к которому нужно применить соответствующий нижний отступ. Опять же, чтобы избежать отрицательного поля поднять нижний колонтитул над любым содержимым
3 Задать calc() для content
Один из способов не использовать лишние элементы - отрегулировать высоту wrapper с помощью calc (). Тогда не будет никакого перекрытия, просто два элемента сложены друг на друга на общую высоту 100%.
Обратите внимание на 70px в calc () и фиксированную высоту футера 50px. Предположим, что последний элемент в content имеет margin-bottom в 20 пикселей. Именно это нижнее поле плюс высоту футера необходимо сложить вместе, чтобы вычесть из высоты области просмотра. И да, мы используем здесь относительные единицы, как еще один маленький трюк, чтобы избежать необходимости устанавливать 100% высоты тела, прежде чем вы сможете установить 100% высоты контента.
4 С помощью flexbox
Большая проблема с вышеупомянутыми тремя методами состоит в том, что они требуют футер фиксированной высоты. Фиксированные высоты, как правило, моветон в веб-дизайне. Содержание может измениться. Вещи гибки. Фиксированные высоты обычно являются территорией красного флага. Использование flexbox для футера колонтитула не только не требует дополнительных элементов, но и позволяет использовать футер переменной высоты.
Вы можете даже добавить заголовок выше или ниже.
5 С помощью Grid
Разметка с помощью сетки еще новее (и менее широко поддерживается), чем flexbox. Вы также можете довольно легко использовать его для прилипания футера к низу страницы.
Но минус grid то что не все браузеры его нормально поддерживают
Эта должно работать в последних версиях Chrome или Firefox и, вероятно, в более новой версии Edge.
Каждый верстальщик рано или поздно сталкивается с необходимостью прижать подвал (футер) сайта к низу страницы. В сети существует несколько способов, позволяющих решить данную проблему. Я покажу некоторые из них, которые сам использую на практике.
Простейшая html разметка:
Footer прижимается к низу путем его абсолютного позиционирования и вытягивания высоты родительских блоков ( html , body и wrapper ) на 100%. При этом блоку content нужно указать нижний отступ, который равен или больше высоты футера, иначе последний закроет часть контента.
Footer прижимается вниз за счет вытягивания блока content и его «родителей» на всю высоту окна браузера и подъема футера вверх через отрицательный отступ ( margin-top ) для избавления от появляющегося при этом вертикального скролла. В данном случае необходимо обязательно указать высоту подвала, и она должна быть равна величине отступа. Благодаря свойству box-sizing: border-box , мы не позволяем блоку с классом content превысить высоту 100%. То есть в данном случае min-height: 100% + padding-bottom: 90px равняется 100% высоты окна браузера.
Данный способ хорош тем, что, в отличие от остальных способов (кроме 5-го), высота футера значения не имеет. Здесь мы эмулируем поведение таблицы, превратив блок wrapper в таблицу, а блок content в строку таблицы (свойства display: table и display: table-row соответственно). Благодаря этому, а также тому, что блоку content и всем его родительским контейнерам задана высота 100%, контент растягивается на всю высоту, но за минусом высоты футера, которая определяется автоматически — эмуляция таблицы не дает подвалу вылезть за пределы высоты окна браузера.
Данный способ не похож ни на один из предыдущих, и его особенность заключается в использовании CSS-функции calc() и единицы измерения vh , которые поддерживаются только современными браузерами. Здесь необходимо знать точную высоту футера. 100vh — это высота окна браузера, а 80px — это высота футера. И с помощью функции calc() мы вычитаем вторую величину из первой, тем самым прижимая футер к низу.
Пожалуй, это лучший способ из всех представленных, однако работает он только в современных браузерах. Как и в третьем способе, высота футера значения не имеет.
Есть основной блок <div > с контентом различной высоты, а под ним размещён футер.
Если контент не достигает всей высоты экрана, нужно чтобы минимальная высота .container занимала свободное место окна браузера. При этом футер должен быть внизу страницы и оставаться видимым.
Футер может менять высоту, но при этом он должен оставаться прижатым к нижнему краю окна браузера.
Для прижатия футера к низу экрана, есть несколько решений. От самого актуального до устаревшего:
1. Решение через Grid Layout для АДАПТИВНОЙ высоты футера
2. Решение через Flexbox для АДАПТИВНОЙ высоты футера
3. Решение через таблицы для АДАПТИВНОЙ высоты футера
4. Решение на нативном JavaScript для АДАПТИВНОЙ высоты футера
5. Решение через calc() для ФИКСИРОВАННОЙ высоты футера
6. Решение через абсолютное позиционирование для ФИКСИРОВАННОЙ высоты футера
Более универсальное в плане сопровождаемости, так как не требует задания фиксированной высоты и хаков с 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 ) чтобы избежать нежелательного "сжатия".
Случай с контентом на всю оставшуюся высоту:
Если надо чтобы был отступ от контента:
Случай с контентом на всю оставшуюся высоту:
Если надо чтобы был отступ от контента, но контент не занимал всю высоту, то используйте 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 :
Подвалом на жаргоне веб-разработчиков называется нижняя часть сайта, где пишутся авторские права, публикуются контакты, выводятся разные счетчики и тому подобная информация. Обычно подвал располагается после всего контента и виден только при прокрутке страницы. В некоторых случаях желательно сделать подвал доступным всегда, независимо от высоты страницы, и зафиксировать его внизу окна браузера.
Для этого воспользуемся свойством position и его значением fixed . При этом элемент остается на одном месте, а его положение задается координатами через свойства top , right , bottom , left . В нашем случае достаточно задать нулевые значения у left и bottom . Ширина фиксированных элементов равна их контенту, что хорошо заметно, если добавить фоновый цвет или рисунок, поэтому необходимо также задать ширину через width как 100% (пример 1).
Пример 1. Фиксированный подвал
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Результат примера показан на рис. 1.
Рис. 1. Подвал внизу страницы
Браузер Internet Explorer 6 не поддерживает значение fixed , поэтому в нем данный пример будет работать некорректно. Для IE6 придется дополнить код двумя тегами <div> , вложив их внутрь контейнеров content и footer , а также включить еще один стиль специально для этого браузера (пример 2).
Пример 2. Код с учетом IE6
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
В данном примере используется значение absolute свойства position . При абсолютном позиционировании элемент можно поместить в любое место окна браузера, но при этом он прокручивается вместе с содержимым. В этом основное различие между значениями fixed и absolute . Чтобы подвал не перемещался, задается высота страницы как 100% и отсекается все, что не помещается в текущие размеры окна. При этом пропадает вертикальная полоса прокрутки, ее следует добавить к content с помощью overflow .
Еще один неприятный момент это наложение фона подвала на полосу прокрутки, так что придется задать отступ справа на ширину скролбара. При этом, если полосы прокрутки нет, в подвале справа будет зиять дыра.
Читайте также: