Дата публикации
5 Апреля 2019
Дата изменения
1 Августа 2020
Уникальных просмотров
2.280

Оглавление

Прижатие к низу окна браузера футера, присутствует в очень многих версиях технических заданий по верстке шаблонов. Если с точки зрения архитектуры шаблона, футер должен находится всегда внизу окна браузера, то эта статья поможет за считанные наносекунды добиться нужного результата. Причем кроссбраузерно. Зачем это нужно? Да все просто, на страницах с маленьким контентом, не прижатый футер будет прыгать к полю контента, многие не любят такое поведение подвала. Подвал на то и подвал, он должен находится внизу. Особенно если того требует ТЗ.

Почему именно flexbox метод?

Есть несколько вариантов прижатия футера, в том числе и готовые решение в некоторых фреймворках. Испробовал почти все, я пришел к выводу что данный метод наилучший. А теперь расскажу почему:

  1. Минимум телодвижений.
  2. Минимум селекторов.
  3. Никакого четкого обозначения высоты футера.
  4. Никаких скриптов и фреймворков.
  5. Поддержка всех известных браузеров. Chrome, Mozilla FF, Yandex, Opera, Edge, IE 11. Пруфы от Билли.
  6. Никаких дополнительных блоков в доме.

На мой взгляд этих 6-ти пунктов более чем достаточно. Перед тем как приступить к реализации, рекомендую ознакомиться со статьей про позиционирование в CSS.

Перейдем к реализации.

Для начала сделаем все тело шаблона flex-контейнером и зададим ему направление сверху вниз, так что все элементы будут складываться в колонку.

body {
    display: flex;
    flex-direction: column;
}

Теперь нужно главный контейнер сделать flex-контейнером. Далее с помощью с помощью свойства flex: 1 1 auto, нам необходимо сделать наш главный wrapper более гибким. Таким образом враппер будет иметь размер в зависимости от свойств его ширины и высоты, но будет расти, чтобы поглотить любое дополнительное свободное пространство во flex-контейнере и будет сжиматься до минимального размера, чтобы соответствовать контейнеру.

С помощью свойства flex-flow: column nowrap, определим колоночное направление главной и поперечной оси.

Ну и с помощью min-height: 100vh, растягиваем wrapper во всю высоту области просмотра. Если вы не в курсе, то vh расшифровывается как viewport height, а 1vh равен одному проценту от высоты области просмотра. Вот что в итоге имеем:

.wrapper {
    display: flex;
    flex: 1 1 auto;
    flex-flow: column nowrap;
    min-height: 100vh;
}

Ну и финиш. Делаем блок контета более гибким.

Заодно этим способом мы заставляем осла 11 версии прижать футер. Иначе проблема будет заключаться в том, что в IE11 flexbox не учитывает минимальную высоту, которую мы указали, поэтому flexbox сворачивается до высоты содержимого контента.

main {
    flex: 1 1 auto;
    background: green;
}

Итог

Ну и смотрим что получилось.

body {
    display: flex;
    flex-direction: column;
}

.wrapper {
    flex: 1 1 auto;
    display: flex;
    flex-flow: column nowrap;
    min-height: 100vh;
}

main {
    flex: 1 0 auto;
    background: green;
}

Финита.

Смотреть пример Прижать футер к низу окна браузера от webinmind.ru (@webinmind).

Благодарность автору

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

Один из самых популярных способов поблагодарить автора, воспользоваться сервисом Яндекс.Деньги.

Время работы: 0,1221 s
Время запросов: 0,1221 s
Количество запросов: 25
Источник: cache