Прижимаем футер к низу страницы
Каждый верстальщик рано или поздно сталкивается с необходимостью прижать подвал (футер) сайта к низу страницы. В сети существует несколько способов, позволяющих решить данную проблему. Я покажу некоторые из них, которые сам использую на практике.
Простейшая html разметка:
<html> <body> <!-- Основной блок (обёртка) --> <div class="wrapper"> <!-- Блок с контентом --> <div class="content"></div> <!-- Футер --> <div class="footer"></div> </div> </body> </html>
Способ #1
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;
}
Способ #2
Footer прижимается вниз за счет вытягивания блока content и его «родителей» на всю высоту окна браузера и подъема футера вверх через отрицательный отступ (margin-top) для избавления от появляющегося при этом вертикального скролла. В данном случае необходимо обязательно указать высоту подвала, и она должна быть равна величине отступа. Благодаря свойству box-sizing: border-box, мы не позволяем блоку с классом content превысить высоту 100%. То есть в данном случае min-height: 100% + padding-bottom: 90px равняется 100% высоты окна браузера.
* {
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;
}
Способ #3
Данный способ хорош тем, что, в отличие от остальных способов (кроме 5-го), высота футера значения не имеет. Здесь мы эмулируем поведение таблицы, превратив блок wrapper в таблицу, а блок content в строку таблицы (свойства display: table и display: table-row соответственно). Благодаря этому, а также тому, что блоку content и всем его родительским контейнерам задана высота 100%, контент растягивается на всю высоту, но за минусом высоты футера, которая определяется автоматически — эмуляция таблицы не дает подвалу вылезть за пределы высоты окна браузера.
*{
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
.wrapper {
display: table;
height: 100%;
}
.content {
display: table-row;
height: 100%;
}
Способ #4
Данный способ не похож ни на один из предыдущих, и его особенность заключается в использовании CSS-функции calc() и единицы измерения vh, которые поддерживаются только современными браузерами. Здесь необходимо знать точную высоту футера. 100vh — это высота окна браузера, а 80px — это высота футера. И с помощью функции calc() мы вычитаем вторую величину из первой, тем самым прижимая футер к низу.
* {
margin: 0;
padding: 0;
}
.content {
min-height: calc(100vh - 80px);
}
Способ #5
Пожалуй, это лучший способ из всех представленных, однако работает он только в современных браузерах. Как и в третьем способе, высота футера значения не имеет.
* {
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;
}
Способ #6
Здесь целая библиотека на разные случаи (используется Flexbox)