Как прижать футер к низу страницы css
Перейти к содержимому

Как прижать футер к низу страницы css

  • автор:

Как привязать футер к низу страницы css

Существует несколько способов, позволяющих решить данную проблему. Рассмотрим некоторые из них.

Исходный HTML файл:

    class="wrapper">  class="content">i am content  class="footer">I am footer    

Пример №1. Footer документа прижимается к низу с помощью фиксированного позиционирования.

.footer  position: fixed; left: 0; bottom: 0; /* Добавим цвет и ширину блока для наглядности*/ background-color: #444; width: 100%; > 

Пример №2. C помощью Flex. Обратите внимание что классу обертке необходимо будет задать высоту.

.wrapper  display: flex; flex-direction: column; justify-content: space-between; height: 100vh; > 

Пример №3. С помощью Grid. У обертки так же задается высота.

.wrapper  height: 100vh; display: grid; grid-template-rows: 1fr auto ; > 

Прижимаем футер к низу страницы

Каждый верстальщик рано или поздно сталкивается с необходимостью прижать подвал (футер) сайта к низу страницы. В сети существует несколько способов, позволяющих решить данную проблему. Я покажу некоторые из них, которые сам использую на практике.

Простейшая html разметка:

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

Способ #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

Способ #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

Способ #4

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

* < margin: 0; padding: 0; >.content

Способ #5

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

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

Способ #6

Здесь целая библиотека на разные случаи (используется Flexbox )

Как прижать footer сайта к низу страницы

Иногда на небольших сайтах, где вся информация на странице помещается в один экран есть необходимость прижимать footer сайта к низу экрана. В противном случае footer будет идти сразу после контентной части, а между концом блока футера и нижней частью экрана останется «просвет». Проблему можно решить при помощи css стилей.

Как прижать блок сайта к низу экрана

Давайте рассмотрим простой пример, состоящий из 3-х основных блоков, шапки сайта, контентной части и футера.

В примере у нас есть родительский общий блок container и три вложенных блока шапки, контента и футера. Рассмотрим CSS.

 html, body < height:100%; >.container < min-height:100%; position:relative; text-align: center; max-width: 60%; margin: 0 auto; >/*Шапка сайта*/ .header < background:#EEE; padding:10px; >/*Контентная часть*/ .content < padding-bottom:70px; /*Отступаем от низа экрана на высоту блока footer*/ >/*Стили для нижней части*/ .footer

Результат можно посмотреть в демо примере.

Надеюсь вам поможет рассмотренный пример. Желаю удачи!

5 способов как прижать footer к низу страницы

Назначение футера заключается в том, что он «прилипает» к нижней части окна браузера. Если на странице достаточно контента, чтобы сдвинуть его, то так и будет. Но если содержимое на странице короткое, тогда футер будет висеть посередине экрана.

Мы покажем 5 способов как можно прижать футер к низу страницы на чистом css

1 Отрицательный margin для wrapper

Создадим два соседних блока wrapper и footer. Для wrapper зададим нижний минусовый отступ равен высоте футера.

body> div class="wrapper"> content div class="push">div> div> footer class="footer">footer> body> 
html, body  height: 100%; margin: 0; > .wrapper  min-height: 100%; /* Equal to height of footer */ /* But also accounting for potential margin-bottom of last child */ margin-bottom: -50px; > .footer, .push  height: 50px; >

Для этого требуется дополнительный элемент внутри wraper (“push”), чтобы гарантировать, что отрицательный margin не подтянет footer и не закроет какой-либо контент.

2 Отрицательный margin для footer

Этот метод не требовал использования элемента push, но вместо этого требовался дополнительный элемент обтекания вокруг содержимого, к которому нужно применить соответствующий нижний отступ. Опять же, чтобы избежать отрицательного поля поднять нижний колонтитул над любым содержимым

body> div class="content"> div class="content-inside"> content div> div> footer class="footer">footer> body>
html, body  height: 100%; margin: 0; > .content  min-height: 100%; > .content-inside  padding: 20px; padding-bottom: 50px; > .footer  height: 50px; margin-top: -50px; >

3 Задать calc() для content

Один из способов не использовать лишние элементы — отрегулировать высоту wrapper с помощью calc (). Тогда не будет никакого перекрытия, просто два элемента сложены друг на друга на общую высоту 100%.

body> div class="content"> content div> footer class="footer">footer> body>
.content  min-height: calc(100vh - 70px); > .footer  height: 50px; >

Обратите внимание на 70px в calc () и фиксированную высоту футера 50px. Предположим, что последний элемент в content имеет margin-bottom в 20 пикселей. Именно это нижнее поле плюс высоту футера необходимо сложить вместе, чтобы вычесть из высоты области просмотра. И да, мы используем здесь относительные единицы, как еще один маленький трюк, чтобы избежать необходимости устанавливать 100% высоты тела, прежде чем вы сможете установить 100% высоты контента.

4 С помощью flexbox

Большая проблема с вышеупомянутыми тремя методами состоит в том, что они требуют футер фиксированной высоты. Фиксированные высоты, как правило, моветон в веб-дизайне. Содержание может измениться. Вещи гибки. Фиксированные высоты обычно являются территорией красного флага. Использование flexbox для футера колонтитула не только не требует дополнительных элементов, но и позволяет использовать футер переменной высоты.

body> div class="content"> content div> footer class="footer">footer> body>
html, body  height: 100%; > body  display: flex; flex-direction: column; > .content  flex: 1 0 auto; > .footer  flex-shrink: 0; >

Вы можете даже добавить заголовок выше или ниже.

5 С помощью Grid

Разметка с помощью сетки еще новее (и менее широко поддерживается), чем flexbox. Вы также можете довольно легко использовать его для прилипания футера к низу страницы.

body> div class="content"> content div> footer class="footer">footer> body>
html  height: 100%; > body  min-height: 100%; display: grid; grid-template-rows: 1fr auto; > .footer  grid-row-start: 2; grid-row-end: 3; >

Но минус grid то что не все браузеры его нормально поддерживают

Эта должно работать в последних версиях Chrome или Firefox и, вероятно, в более новой версии Edge.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *