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

Прижать футер к низу окна браузера

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

Родитель на всю высоту окна height: 100%

Футер прижимается вниз за счет вытягивания блока контента и его родительских блоков на всю высоту height: 100% окна браузера и подъема футера вверх через отрицательный отступ margin-top: -100px для того чтобы не появлялся вертикальный скролл. В данном примере обязательно нужно указывать высоту подвала, которая должна быть равна значению отступа.
CSS код 1-го варианта:

Абсолютное позиционирование

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

Имитация поведения таблицы display: table

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

Использование CSS-функции calc()

100vh — высота окна браузера, а 100px — это высота футера. Функция calc() вычитает вторую величину из первой, в итоге футер прижимается к низу.
CSS код 4-го варианта:

Использование CSS свойства display: flex

Работает только в современных браузерах которые поддерживают это свойство
CSS код 5-го варианта:

• CSS / HTML
• FrontEnd (ФронтЭнд)

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

Задача прижать footer к низу окна браузера — это одна из самых часто встречаемых задач при верстке. В общем, ситуация следующая: на странице есть три области: шапка, основной контент и подвал. Бывают страницы, в которых основной контент занимает совсем немного места и, в итоге, они начинают выглядеть примерно вот так:

   charset="utf-8"> rel="stylesheet" type="text/css" href="style.css" /> Прижать footer к низу   class="wrapper"> Логотип и слоган  class="wrapper">  Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.   Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.   class="wrapper"> © Copyright. All rights reserved   

/* общие стили */ * < margin: 0; padding: 0; >body < font: 14px/1.2 Arial, sans-serif; color: #000; background: #eee; >.wrapper < max-width: 1000px; margin: 0 auto; >/* шапка */ header < box-sizing: border-box; height: 40px; padding: 10px; font-weight: bold; background: #fff; >/* основной контент */ body > .wrapper < overflow: hidden; margin-top: 20px; margin-bottom: 20px; >body > .wrapper > article, body > .wrapper > aside < box-sizing: border-box; padding: 10px; background: #fff; >body > .wrapper > article < float: left; width: 68%; >body > .wrapper > aside < float: right; width: 30%; >body > .wrapper > article > h1, body > .wrapper > article > p, body > .wrapper > aside > h2, body > .wrapper > aside > p < margin: 10px 0; >/* подвал */ footer

Нижняя часть сайта прижимается к контенту и внизу страницы остается пустое пространство. А теперь код CSS, который позволит решить проблему и прижать footer к низу окна браузера:

/* общие стили */ * < margin: 0; padding: 0; >html < /* прижать footer к низу */ position: relative; min-height: 100%; >body < font: 14px/1.2 Arial, sans-serif; color: #000; background: #eee; /* прижать footer к низу */ height: 100%; >.wrapper < max-width: 1000px; margin: 0 auto; >/* шапка */ header < box-sizing: border-box; height: 40px; padding: 10px; font-weight: bold; background: #fff; >/* основной контент */ body > .wrapper < overflow: hidden; margin-top: 20px; margin-bottom: 20px; /* прижать footer к низу */ padding-bottom: 40px; >body > .wrapper > article, body > .wrapper > aside < box-sizing: border-box; padding: 10px; background: #fff; >body > .wrapper > article < float: left; width: 68%; >body > .wrapper > aside < float: right; width: 30%; >body > .wrapper > article > h1, body > .wrapper > article > p, body > .wrapper > aside > h2, body > .wrapper > aside > p < margin: 10px 0; >/* подвал */ footer < box-sizing: border-box; height: 40px; padding: 10px; background: #fff; /* прижать footer к низу */ position: absolute; bottom: 0; width: 100%; >

Более современный способ прижать footer к низу окна браузера — использовать Flexbox:

  Шапка Контент Подвал 

html < height: 100%; >body < display: flex; flex-direction: column; min-height: 100%; margin: 0; >main

• CSS. Как работает z-index
• CSS-переходы и CSS-анимации
• Bootstrap 4. Горизонтельное меню «Navbar»
• Bootstrap 4. Навигация: ссылки, вкладки и кнопки
• Bootstrap 4. Компонент «Сообщения»
• Bootstrap 4. Компонент «Модальное окно»
• Bootstrap 4. Компонент «Карточка»

Как прижать footer к низу в bootstrap 3?

Footer в Bootstrap 3 прижать к нижней части сайта очень просто. Нужно изменить код на примерно такой:

добавили nav с классом navbar-fixed-bottom, который прижимает footer к нижней части сайта. И в стилях нужно внести небольшие изменения:

footer nav

Весь код будет выглядеть так: HTML

.header a, a:hover < color: #f0ad4e; text-decoration: none; >.header h1 < letter-spacing: 15px; font-size: 300%; >.header p < color: white !important; font-size: 90%; letter-spacing: 3px; >.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover < color: #fff; background-color: #346270; >.nav-pills>li>a < color: #fff; >.nav-pills>li>a:hover < background-color: #346270; >.navbar-inverse < padding: 1%; border-radius: 0; >@media (max-width: 767px) < .nav-pills>li < float: none; >.nav-pills < text-align: center; >.header h1 < font-size: 280%; letter-spacing: 5px; >.header < text-align: center; >> .clear < clear: both; height: 63px; >.wrapper < min-height: 100%; >html, body < height: 100%; >.films_block < text-align: center; >.films_block img < margin-bottom: 5%; border-radius: 5px; border: solid 5px #dad7d5; width: 100%; >.film_label < padding: 2%; margin-bottom: 4%; >.margin-8 < margin-top: 8%; >.panel < border: none; >.panel-body < background-color: #f9f9f9; >.panel-info>.panel-heading < background-color: #f0ad4e; color: white; border-color: transparent; >.sidebar-header < font-size: 120%; letter-spacing: 2px; >.form-control < border-radius: 0px; >.input-lg < font-size: 14px; >footer nav < color: #666; background: #222; padding: 17px 0 18px 0; border-top: 1px solid #000; >footer a < color: #999; >footer a:hover

Прижимаем подвал к низу

Хорошим тоном является заполнение сайтом всей доступной области экрана браузера (как минимум по высоте для статичных по ширине дизайнов).

Часто при не прижатом подвале сайт смотрится странно

Совсем другое дело, когда задумка дизайнера точно передана

Решение

Для примера возьмем простую страницу, состоящую из двух основных блоков: основного (main) и подвала (footer). Сделаем чтобы основной блок занял всю площадь окна браузера независимо от количества контента, при этом футер прижмем к низу экрана так, чтобы в браузере не появилась вертикальная полоса прокрутки. Как делаем:

Шаг 1

Делаем 2 блока: основной (main) и подвал (footer). Основной контейнер растягиваем на всю высоту экрана браузера (min-height), подвалу жестко указываем высоту (height).

При этом общая высота сайта составит высота экрана + высота подвала.

Шаг 2

Отрицательным отступом (margin-top) «въезжаем» в основной блок, чтобы высота сайта составляла только 100% высоты экрана.

При таком расположении блоков и при достаточном количестве контента (например, текста) в основном блоке, возможны накладки контента в основном блоке на подвал:

Шаг 3

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

Теперь, если контента будет много, он будет двигать пустой блок вниз. А это будет опускать и подвал, не давая налезть на него контенту.

Смотрим как это выглядит в коде:

      
Это основной блок
 
Это подвал
   

Заметка: при использовании блочной верстки и плавающих основных блоков (колонок) для .hFooter следует добавить clear: both, чтобы подвал расположился под колонками.:

.hFooter

Заметка 1: Если ты уже немного освоил CSS, тогда может возникнуть вопрос: » Зачем использовать дополнительный элемент, если можно воспользоваться padding-bottom?». Ответ — так просто его тут использовать нельзя, т.к. размер блока равен его ширине и высоте + сумме внутренних отступов + сумме толщин бордюров. Связка min-height: 100% и padding-bottom даст высоту сайта больше высоты экрана. В итоге даже при отсутствии контента вовсе, подвал будет за пределами «первого экрана». Как это можно обойти смотри ниже.

Заметка 2. В Opera версии 9.5 и выше при добавлении doctype этот пример не сработает. Варианты обхода:

добавить в основной тег-контейнер хотя бы один плавающий блок:

  
Это основной блок
 
 
Это подвал
   

html,body

update — Недостаток данного приема

Это использование дополнительного пустого элемента hFooter. В реальных условиях (когда содержимое сайта не пустое и применяется блочная верстка) этого можно избежать применив прием clearfix — этот прим поможет очистить поток без использования дополнительного элемента, а чтобы контент не налез на футер, пропишем в колонках padding-bottom

update — проблемы с z-слоями

В вышеописанном приеме футер поднимали отрицательным отступом вверх. При этом возникаем потенциальная проблема с z-слоями. Например, нам нужно показать всплывающее окно (пускай это будет div ), которое будет позиционироваться относительно контейнера main.

.main < position: relative; /* чтобы дочерние элементы позиционировались относительно этого блока */ z-index: 1; /* z-index меньше чем у футера, чтобы тот был виден */ >.popup < position: absolute; z-index: 100; [. ] >.footer < height: 50px; margin-top: -50px; position: relative; /* чтобы можно было задать z-index */ z-index: 2; /* больше, чем у main чтобы быть видимым */ >

Все хорошо до тех пор пока у нас не пересекаются всплывающее окно и подвал (а такая ситуация довольно часто возникает) — вот тут начинаются проблемы. Немотря на то, что у всплывающего окна наибольший z-index, оно будет перекрываться футером, т.к. родитель popup имеет z-index меньший, чем у подвала:

Вариант 1 — искать возможность позиционировать окно не относительно main, а относительно какого-либо другого дочернего элемента, который расположен в main. Таким образом, избавимся от указания z-index для main и footer. Но такой вариант не всегда возможен, потому рассмотрим второй вариант прижатия футера.

Решение 2 — абсолютное позиционирование

Идея похожа на решение 1:

1. растягиваем основной блок на всю всот экрана
2. резервируем место для подвала
3. относительно основного блока позиционируем подвал в самый низ абсолютным позиционированием

html, body < height: 100%; >.main < min-height: 100%; position: relative; /* чтобы дочерние элементы позиционировались относительно этого блока */ >.footer < height: 50px; position: absolute; left: 0; bottom: 0; width: 100%; >* html .footer < bottomy:expression(parentNode.offsetHeight % 2 ? style.bottom="-1px" : style.bottom="0px"); /* хак для ие6, у которого есть косяк со смещением на 1px */ >

Такой подход решит проблему с всплывающими окнами, т.к. и footer и popup будут иметь общего родителя, а значит с z-слоями сюрпризов не будет.

Недостаток обоих методов

update: Оба метода годятся только для фиксированного по высоте подвала.

По теме

• CSS приемы
  • «Дергание» сайта
  • background position со смещением
  • clearfix
  • CSS прозрачность
  • CSS хаки
  • RGBA — CSS полупрозрачность
  • Затемнение фона
  • Кроссбраузерный
    

    ---

  • Обнуление отступов
  • Порядок описания ссылок
  • Прелоад изображений
  • Сброс стилей
  • Сокращения в CSS
  • Убираем рамку с эл-ов в фокусе
  • Условные CSS
  • Условные комментарии
  • Поворот вокруг своей оси
  • Поворот объекта вокруг свой
  • Resize для textarea в Safari и Chrome
  • Блочная верстка форм
  • Кастомные checkbox и radio на CSS
  • Кросбраузерные input и textarea
  • Кроссбраузерный button
  • Нестандартные checkbox
  • Нестандартные radio
  • Нестандартные select
  • Нестандартные select multiple
  • Нестандартные поля выбора файла
  • Нестандартные текстовые поля
  • О кроссбраузерности placeholder
  • Отступы у checkbox и radio
  • Оформление input type=search
  • Резиновая кнопка
  • Текст в поле type=»password»
  • Блоки равной высоты в строке
  • Колонки равной высоты
  • Прижимаем подвал к низу
  • Ресайз окна: потомок перерос родителя
  • Сайт в центре экрана
  • Фиксированная колонка + резиновая + clear:both
  • CSS 3D лента
  • CSS3 всплывающие подсказки
  • IMG внутри блока — убираем странный отступ
  • IMG: меняем рисунок при наведении
  • Аккордеон на чистом CSS3
  • Валидный target=»_blank»
  • Верстка рейтингов
  • Верстка содержания
  • Вставка спецсимволов в генерируемый контент
  • Вставка стрелок
  • Индивидуальные стили для li. Избавляемся от классов.
  • Масштабируемая картинка в резиновой колонке
  • Многоколоночный текст на CSS3
  • Нестандартное подчеркивание
  • Отменяем обтекание текстом картинки
  • Оформление внешних ссылок
  • Оформление изображений по align
  • Оформляем «ol»
  • Правильные анонсы новостей
  • Список определений. Требуем невозможного.
  • Firefox
    • -moz-box-shadow и -moz-border-radius — это кошмар CPU
    • Позиционирование внутри button
    • Ширина input type=file
    • Onload в IE9
    • z-index в IE6-7
    • Баг с текстом при применении Alpha фильтра
    • Масштабирование и PIE
    • Отступы в кнопках в IE6-7
    • Проблемы с em
    • Эмуляция after и before для IE 6-7
    • Эмуляция data:URL для IE6-7 — используем MHTML-включение
    • hasLayout
    • Max-width
    • Min-height
    • Min-width
    • Min-width и max-width одновременно
    • PNG и прозрачность
    • Высота блока 1px
    • Дублирование символов
    • Дырка под футером
    • Как перекрыть select
    • Обрезка контента c отрицательным margin в IE6
    • Отступы плавающих блоков
    • Проблемы с размерами блоков
    • Псевдокласс :first-child
    • Псевдокласс hover в IE 6
    • Селектор потомков >
    • Селекторы атрибутов [type=…]
    • Сестринский селектор
    • Смещение на 1px
    • Ссылки с вложением
    • Устраняем flickering
    • Эмуляция position:fixed
    • overflow-y
    • Не подгружаются шрифты @font-face
    • Проблема с oveflow: hidden
    • Скругление img
    • HTML шаблон для мобильных устройств
    • Выпадающее меню на CSS
    • Выравнивание навигации из блоков по центру
    • Выравнивание навигации по середине
    • Резиновое меню
    • Резиновое меню из блоков
    • Убираем класс для первого элемента
    • Box-sizing: переключаем блочную модель
    • inline-block: простое свойство для непростых задач
    • Вертикальная позиция для строчного элемента
    • Вертикальное выравнивание
    • Выравнивание по центру с position: absolute
    • Вычисляемые отступы
    • Два в одном: позиция + размеры
    • Долой отступы между строчными элементами (и блоками)
    • Обходим схлопывание margin
    • Центрирование картинки в блоке
    • Центрирование резинового блока по горизонтали
    • Активация flash
    • Вставка flash в HTML
    • Вставляем ролик с YouTube
    • Как отключить flash
    • Как перекрыть flash
    • Параметры для вставки объектов
    • Ссылка на flash объекте
    • CSS треугольники
    • Аппаратное ускорение анимации
    • Встраиваем изображения — data:URL
    • Градиент: CSS3 против CSS2 + картинка
    • Лесенка спрайтов — сложный случай поклейки
    • На одну картинку меньше. Спецсимвол ×
    • Необычные тени с CSS3 box-shadow
    • Оптимизация Google Web Fonts
    • Оптимизация фонов с помощью Canvas
    • Проблемы с border-radius
    • Псевдоэлемент before для маркера списка
    • Скругление углов. Обзор методов.
    • Сокращаем HTML5 код
    • Спрайты: меньше картинок — больше скорость
    • Тень для блока
    • Фигуры с углами на CSS
    • Шаблоны градиентов
    • Дополнение Skype
    • Подключить favicon
    • Профилактика сайта: максимально простое оповещение
    • Ссылки на skype
    • @font-face в деталях
    • Cufon — нестандартный шрифт средствами JS
    • font-size: 100.01% для html
    • Безопасные шрифтовые CSS стеки для англоязычных текстов
    • Безопасные шрифтовые CSS стеки для рунета
    • Безопасные шрифты
    • Вертикальный текст
    • Используем псевдоэлемент :first-letter
    • Контур для текста
    • Нестандарный шрифт. Быть ему или нет?
    • Нестандартный шрифт средствами CSS
    • Плавающий :first-letter
    • Подмена текста изображением
    • Соответствия шрифтов Windows, Mac и Unix/Linux
    • Строчный :first-letter
    • Текст под углом
    • Текст с CSS градиентом
    • Тень для текста
    • Эффект отражения