5 способов сделать футер внизу страницы CSS

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

Многие начинающие и не только начинающие верстальщики и простые сайтоделы сталкиваются с проблемой парящего в середине страницы подвала сайта. Это происходит из-за того, что высоты основного содержимого страницы не хватает для того, чтобы прижать футер вниз страницы. Но как же быть, если необходимо, чтобы подвал всегда был на положенном ему месте и собственно как сделать футер внизу страницы сайта. Сейчас мы с этим разберемся.

Сегодня мы рассмотрим 5 способов прижать футер внизу страницы сайта с помощью CSS. Какой из них подойдет больше для вашего случая - решать только Вам.

Все представленные способы будут иметь одинаковую структуру html кода, используемую веб мастерами чаще всего:

Будет меняться лишь CSS код. Приступим.

Первый способ. Футер - в абсолют. Вытягиваем высоту родителей

Footer прижимается вниз путем его абсолютного позиционирования и вытягивания высоты родительских блоков (html, body и .wrapper) на 100%. При этом контентному блоку .content нужно указать нижний отступ, который равен или больше высоты подвала, иначе последний закроет часть контента.


* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
.wrapper {
  position: relative;
  min-height: 100%;
}
.content {
  padding-bottom: 90px;
}
.footer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 80px;
}

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

Footer прижимается вниз за счет вытягивания блока контента и его «родителей» на всю высоту окна браузера и подъема футера вверх через отрицательный отступ (margin-top) для избавления от появляющегося при этом вертикального скролла. В данном случае необходимо обязательно указать высоту подвала, и она должна быть равна величине отступа.


* {
  margin: 0;
  padding: 0;
}
html,
body,
.wrapper {
  height: 100%;
}
.content {
  box-sizing: border-box;
  min-height: 100%;
  padding-bottom: 90px;
}
.footer {
  height: 80px;
  margin-top: -80px;
}

Благодаря свойству border-box, мы не позволяем блоку с классом .content превысить высоту 100%. То есть в данном случае min-height: 100% + padding-bottom: 90px равняется 100% высоты окна браузера.

Третий способ. Превращаем всё в таблицы

Он хорош тем, что, в отличие от остальных способов (кроме 5-го), высота футера значения не имеет.


* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
.wrapper {
  display: table;
  height: 100%;
}
.content {
  display: table-row;
  height: 100%;
}

Здесь мы эмулируем поведение таблицы, превратив блок .wrapper в таблицу, а блок .content в строку таблицы (свойства display: table и display: table-row соответственно). Благодаря этому, а также тому, что блоку .content и всем его родительским контейнерам задана высота 100%, контент растягивается на всю высоту, но за минусом высоты футера, которая определяется автоматически — эмуляция таблицы не дает подвалу вылезть за пределы высоты окна браузера.

В результате footer прижат к низу.

Четвёртый способ. Высчитываем высоту с помощью функции calc()

Данный способ не похож ни на один из предыдущих, и его особенность заключается в использовании CSS-функции calc() и единицы измерения vh, которые поддерживаются только современными браузерами. Здесь необходимо знать точную высоту подвала.


* {
  margin: 0;
  padding: 0;
}
.content {
  min-height: calc(100vh - 80px);
}

100vh — это высота окна браузера, а 80px — это высота футера. И с помощью функции calc() мы вычитаем вторую величину из первой, тем самым прижимая футер к низу.

Узнать, какие браузеры поддерживают calc() и vh, вы можете на сайте caniuse.com.

Пятый способ. Флексим

Это лучший способ из всех представленных, однако работает он только в современных браузерах. Как и в третьем способе, высота футера значения не имеет.


* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
.wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.content {
  flex: 1 0 auto;
}
.footer {
  flex: 0 0 auto;
}

Также убедитесь, что display: flex; корректно работает во всех необходимых для вас браузерах, так как часто обнаруживаются проблемы при использовании в браузере Safari в виду его неактуальности и отсутствия поддержки современных стандартов.

Если у вас есть еще способы прижать подвал сайта к низу страницы, то делитесь ими в комментариях. За помощью также добро пожаловать в комментарии.


Comments