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

2 способа прижать футер к нижней части страницы (подходит для IE10 & Edge)

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

Способ первый — не очень правильный, но часто используемый.

Футер спозиционирован абсолютно и прижат книзу. А для родительского блока задан снизу отступ, равный высоте футера. И поскольку для разных размеров экрана высота футера может быть разно, то высоту футера высчитываем скриптом.

CSS для абсолютного позиционирования футера внизу:

.body < position: relative; min-height: 100vh; box-sizing: border-box; >.footer

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

(function addPaddingForFooter() < var $footerHeight = $('.footer').outerHeight(); $('.body').css(< 'padding-bottom': $footerHeight >); >)();

Пример реализации с абсолютным позиционированием футера:

Способ второй — правильный, с использованием flex.

Для родительского блока задаем display: flex; направление размещения блоков — column , и здесь есть 2 варианта:

а) для блока .content , который идет перед .footer задаем flex-shrink: 0 , для того, чтобы этот блок не сжимался, если высота содержимого страницы будет больше 100vh, а для .footer задаем margin-top: auto;

.body < position: relative; height: 100vh; display: flex; flex-direction: column; >.content < flex-shrink: 0; >.footer

б) для блока .content , который идет перед .footer задаем flex-grow: 1 и flex-shrink: 0 , для того, чтобы этот блок занимал все свободное место и при этом не сжимался., а для футера ничего прописывать не нужно.

.body < position: relative; height: 100vh; display: flex; flex-direction: column; >.content

Пример реализации с использованием flex :

Простой пример, как убрать стрелки в поле input[type=»number»] с помощью CSS: Важное дополнение: по прежнему…

Часто в мобильной версии сайта используется кнопка типа «бургера» для вызова основного меню сайта. На…

Суть задачи в том, чтобы сделать плавное появление и скрытие flex-контейнера. Если использовать просто fadeIn(),…

Суть задачи будет понятна для тех, кто уже столкнулся с этой проблемой. Но попробую объяснить…

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

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

Вот так выглядит страница с малым количеством контента в центральной его части и если футер не прижат. Есть ощущение, что он просто повис в воздухе.

Прижать футер при верстке на flex

Для примера создадим HTML страницу с классической структурой:

Пропишем CSS правила:

.container overflow: hidden;
display: flex;
flex-direction: column;
min-height: 100vh;
>

.content max-width: 800px;
margin: 0 auto;
padding: 40px 20px;
>

.footer margin-top: auto;
>

Какие CSS свойства прижмут футер к низу?

Зададим минимальную высоту у контейнера 100vh, при увеличении контента, этот блок будет вытягиваться в длину. Указав блоку footer свойство margin-top: auto, позволим браузеру автоматически вычислять верхний отступ, пока он не дойдет до низа контейнера.

Первый способ

.container .
min-height: 100vh;
>

.footer margin-top: auto;
>

Второй способ

Блок content является flex-элементом flex-контейнера container и у него есть свойство flex-grow (жадность), которое по умолчанию равно 0. Если контенту задать flex-grow: 1, то он займет все пространство родителя. Тогда футеру будет доступно немного места внизу страницы. Именно это нам и нужно.

Как прижать футер на Bootstrap

Добавьте специальный класс mt-auto.

Необходимостью прижатия футера к низу страницы — это типичная задача, с которой рано или поздно столкнется каждый верстальщик. Эффект повисшего в воздухе футера возникает, когда недостаточно контента в основной части страницы. Однако изучая CSS-свойства по справочникам, а затем сталкиваясь уже с практической версткой, одной теории не хватает. Этот видеокурс «Вёрстка сайта с нуля 2.0», как раз направлен на практическое применение теоретических знаний.

Посмотрите демо на CodePen

Создано 29.07.2020 10:37:06

Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:
   Она выглядит вот так:
2. Текстовая ссылка:
   Она выглядит вот так: Как создать свой сайт
3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии ( 0 ):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Copyright © 2010-2023 Русаков Михаил Юрьевич. Все права защищены.

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

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

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

В процессе практики выделили 5 способов прижимания футера к низу окна браузера с помощью CSS.

HTML-код всех представленных способов имеет следующую структуру (отличие лишь в CSS-коде):

В 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

Второй способ

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

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

Благодаря свойству box-sizing: 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

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

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

Четвертый способ

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

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

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

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

Пятый способ (самый актуальный)

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

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

Узнать про поддержку браузерами свойства flex можно здесь.

Как прижать footer к низу окна браузера с помощью CSS.

Задача прижать footer к низу окна браузера – это одна из самых часто встречаемых задач при верстке сайта.

В общем, ситуация следующая: на странице есть 3 области header, content и footer (верхняя часть страницы, содержимое и нижняя часть).

Бывают страницы, в которых содержимое занимает совсем немного места и, в итоге, они начинают выглядеть примерно вот так:

Нижняя часть сайта (footer) прижимается к контенту и внизу страницы остается пустое пространство.

Как избежать этой ситуации? Как прижать footer к низу окна браузера?

В этой заметке хочу поделиться своим опытом в решении этого вопроса.

Все мои уроки по CSS (каскадным таблицам стилей) здесь.

Итак, имеем следующий HTML-код:

    
Содержимое header
 
 
Заголовок.
 
Пример текста документа
 
 
Место copyright.
 
  

Теперь посмотрите на код CSS, который позволит решить проблему и прижать footer к низу окна браузера.

* < margin:0; >body height: 100%; min-width:900px; > html < position:relative; min-height:100%; >#container < padding-bottom: 100px;/*Примерно 2 размера footer, чтобы он не наезжал на контент при узком окне браузера*/ >#footer

В общем, теперь страница выглядит вот так:

Эффект достигается за счет задания элементу html минимальной высоты min-height 100% и относительного позиционирования position:relative.

Для элемента body обязательно нужно задать высоту 100%.

Теперь, когда блок footer будет абсолютно позионироваться относительно низа страницы

position: absolute; bottom: 0;

он встанет как раз в то место, где заканчивается 100% высоты элемента body.

Все мои уроки по CSS (каскадным таблицам стилей) здесь.

Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через: