Прижимаем футер к низу страницы
Каждый верстальщик рано или поздно сталкивается с необходимостью прижать подвал (футер) сайта к низу страницы. В сети существует несколько способов, позволяющих решить данную проблему. Я покажу некоторые из них, которые сам использую на практике.
Простейшая 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
)