Как сверстать footer через flex

min-height: 100vh;
display: flex;
flex-direction: column;
flex: 1 1 auto;

Результат

Второй способ при помощи Grid

Вам так же как и с примером применения flex, нужно задать min-height:100vh; что бы сделать блок в котором находятся header и footer на всю высоту, затем задать display:grid; и grid-template-rows: auto 1fr auto;

grid-template-rows: auto 1fr auto; дает нам возможность занять все свободное расстояние между header и footer, благодаря заданному размеру в 1fr. Тем самым и прижимает footer к низу, так как блок с контентом занял всю свободную область. Свойству влияет на дочерние элементы, теперь ненужно задавать свойство напрямую блоку находящемуся между header и footer.

Как прижать footer к низу экрана?

Есть основной блок

.container

  
header
 
content
  

Отслеживать
7,289 5 5 золотых знаков 27 27 серебряных знаков 71 71 бронзовый знак
задан 20 июл 2016 в 7:47
747 1 1 золотой знак 6 6 серебряных знаков 10 10 бронзовых знаков
Пробовали использовать media queries? developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/…
20 июл 2016 в 9:35
Возможный дубликат вопроса: Подвал не фиксированной высоты прижатый к низу экрана
20 июл 2016 в 9:54
Это дубликат вопроса, а не наоборот.
6 янв 2017 в 15:55

я так понимаю, что у Вас должен контент постоянно меняться, в зависимости от выбранных вкладок в каком-то меню. Я тоже сталкивался с моментами, когда нужно было, чтоб футер четко был внизу при , практически пустом контенте (даже немного скролил). Я такой момент решал бонально просто: в своем файле css я ставил .content < min-height: 600px; >( ну или 500-700px в зависимости от того какой высоты у Вас хедер, просто просчитываете контент). Я не говорю, что это решение оригинальное, но в своих проектах я его использовал и мне это не доставляло неудобств в дальнейшем.

9 апр 2017 в 19:22

9 ответов 9

Сортировка: Сброс на вариант по умолчанию

Для прижатия футера к низу экрана, есть несколько решений. Ниже представлены варианты от самого актуального до устаревшего:

1. Решение через Grid Layout для АДАПТИВНОЙ высоты футера

html < height: 100%; >body < margin: 0; color: #fff; /* Растягиваем body по высоте html */ min-height: 100%; display: grid; grid-template-rows: auto 1fr auto; >header < background: blue; >main < background: red; >footer

 
header
 
content
  

2. Решение через Flexbox для АДАПТИВНОЙ высоты футера

body < margin: 0; color: #fff; display: flex; flex-direction: column; min-height: 100vh; >header < background: blue; >main < /* Чтобы занимал оставшееся пространство */ flex-grow: 1; background: red; >footer < /* Чтобы footer не уменьшался */ flex-shrink: 0; background: black; >

 
header
 
content
  

3. Решение через таблицы для АДАПТИВНОЙ высоты футера

body < margin: 0; color: #fff; display: table; min-height: 100vh; width: 100%; >header < background: blue; >main < display: table-row; /* Чтобы ряд занимал всё оставшееся пространство, так как табличная разметка не позволит ему вытолкнуть header и footer */ height: 100%; background: red; >footer

 
header
 
content
  

4. Решение на нативном JavaScript для АДАПТИВНОЙ высоты футера

// Высчитываем высоту footer и делаем соответствующий отступ от main: function footer() < const main = document.getElementsByTagName('main')[0], footer = document.getElementsByTagName('footer')[0] main.style.paddingBottom = footer.clientHeight + 'px' >window.addEventListener('load', footer); window.addEventListener('resize', footer);

html < /* Растягиваем документ на всю высоту окна */ height: 100%; >body < position: relative; margin: 0; color: #fff; /* Растягиваем body по высоте html */ min-height: 100%; >header < background: blue; >main < /* Выставляем отступ с высотой footer по умолчанию */ padding-bottom: 30px; background: red; >footer < /* Позиционируем footer внизу main */ position: absolute; bottom: 0; width: 100%; /* Высота footer по умолчанию */ height: 30px; background: black; >

 
header
 
content
  

5. Решение через calc() для ФИКСИРОВАННОЙ высоты футера

html < /* Растягиваем документ на всю высоту окна */ height: 100%; >body < position: relative; margin: 0; color: #fff; /* Растягиваем body по высоте html */ min-height: 100%; >header < background: blue; >main < /* Выставляем отступ с высотой footer и header */ min-height: calc(100vh - 30px - 18px); background: red; >footer < /* Высота footer */ height: 30px; background: black; >

 
header
 
content
  

6. Решение через абсолютное позиционирование для ФИКСИРОВАННОЙ высоты футера

html < /* Растягиваем документ на всю высоту окна */ height: 100%; >body < position: relative; margin: 0; color: #fff; /* Растягиваем body по высоте html */ min-height: 100%; >header < background: blue; >main < /* Выставляем отступ с высотой footer */ padding-bottom: 30px; background: red; >footer < /* Позиционируем footer внизу main */ position: absolute; bottom: 0; width: 100%; /* Высота footer */ height: 30px; background: black; >

 
header
 
content
  

Отслеживать
ответ дан 2 янв 2017 в 11:11
MobiDevices MobiDevices
7,289 5 5 золотых знаков 27 27 серебряных знаков 71 71 бронзовый знак

Если надо чтобы решение на Flexbox работало в IE, то я у себя в ответе в секции Internet Explorer есть решение.

27 мая 2018 в 19:47

Также приведенное решение на CSS Grid Layout негибкое (требует фиксированной высоты) и не работает в IE 10/11, что исправлено в моём ответе.

27 мая 2018 в 20:08

Решение на flexbox .

Более универсальное в плане сопровождаемости, так как не требует задания фиксированной высоты и хаков с position: absolute . Если вам требуется также поддерживать IE 10/11, то решение включающее их поддержку находится в секции «Flexbox для Internet Explorer 10/11».

Случай с контентом на всю оставшуюся высоту:

body < min-height: 100vh; margin: 0; display: flex; flex-direction: column; >.content < /* Занять всё оставшееся пространство */ flex-grow: 1; border: 1px dotted red; >

 
header
 
content
  

Если надо чтобы был отступ от контента, но контент не занимал всю высоту, то используйте margin-top: auto для footer :

body < min-height: 100vh; margin: 0; display: flex; flex-direction: column; >.content < border: 1px dotted red; >footer < /* Опустить в самый низ */ margin-top: auto; >

 
header
 
content
  

Flexbox для Internet Explorer 10/11

Для того, чтобы описанные выше способы заработали в IE 10/11 нужно помнить о следующих багах браузеров:

• min-height не применяется к элементу с display: flex и flex-direction: column в IE 10-11. Используйте height где это возможно.
• Chrome, Opera, and Safari не учитывают минимальный размер контента непосредственных детей контейнера c display: flex . Установите flex-shrink в 0 (вместо значения по умолчанию 1 ) чтобы избежать нежелательного «сжатия».

Случай с контентом на всю оставшуюся высоту:

body < height: 100vh; margin: 0; display: flex; flex-direction: column; >header, footer < flex-shrink: 0; >.content < /* Занять всё оставшееся пространство */ flex-grow: 1; border: 1px dotted red; >

 
header
 
content
  

Если надо чтобы был отступ от контента:

body < height: 100vh; margin: 0; display: flex; flex-direction: column; >header, footer < flex-shrink: 0; >.content < border: 1px dotted red; >footer < /* Опустить в самый низ */ margin-top: auto; >

 
header
 
content
  

CSS Grid Layout

Случай с контентом на всю оставшуюся высоту:

body < height: 100vh; margin: 0; display: grid; /* задаём высоту строк */ grid-template-rows: auto 1fr auto; >.content

 
header
 
content
  

Если надо чтобы был отступ от контента, но контент не занимал всю высоту, то используйте align-self: start для footer :

body < min-height: 100vh; margin: 0; display: grid; /* задаём высоту строк */ grid-template-rows: auto 1fr auto; >.content < /* кладём элемент в начало ячейки по вертикали */ /* чтобы его высота была равна высоте контента */ align-self: start; border: 1px dotted red; >

 
header
 
content
  

CSS Grid Layout для Internet Explorer 10/11

В Internet Explorer 10/11 реализована устаревшая версия модуля CSS Grid Layout. С практической точки зрения это значит, что реализация этого модуля очень сильно разнится от остальных браузеров, которые поддерживают данный модуль.

Самое главное, о чём нужно помнить, что в IE элементы не располагаются по умолчанию по свободным ячейкам по порядку, а просто кладутся друг на друга в самую первую ячейку. То есть в других браузерах значения по умолчанию grid-row : auto и grid-column: auto , тогда как в IE -ms-grid-row : 1 и -ms-column: 1 , поэтому если номер строки или стоблца элемента не совпадают с 1 , то придётся их прописывать по другому.

Оставльное — более тривиально. Часть свойств не поддерживаются (вроде grid-areas , grid-gap и т.д.), часть называются по другому или требуется другой синтаксис и могут иметь отличные умолчания.

Случай с контентом на всю оставшуюся высоту:

body < height: 100vh; margin: 0; display: -ms-grid; display: grid; /* по умолчанию в IE размер ячеек равен содержимому, */ /* тогда как в других браузерах размер ячеек растягивается */ /* под свобоодное пространство grid-контейера */ -ms-grid-columns: 100%; /* задаём высоту строк */ -ms-grid-rows: auto 1fr auto; grid-template-rows: auto 1fr auto; >.content < /* явно прописываем номер строки, когда она не равна 1 */ -ms-grid-row: 2; border: 1px dotted red; >footer < /* явно прописываем номер строки, когда она не равна 1 */ -ms-grid-row: 3; >

 
header
 
content
  

Если надо чтобы был отступ от контента, но контент не занимал всю высоту, то используйте align-self: start и -ms-grid-row-align: start для footer :

body < height: 100vh; margin: 0; display: -ms-grid; display: grid; /* по умолчанию в IE размер ячеек равен содержимому, */ /* тогда как в других браузерах размер ячеек растягивается */ /* под свобоодное пространство grid-контейера */ -ms-grid-columns: 100%; /* задаём высоту строк, разные имена свойств */ -ms-grid-rows: auto 1fr auto; grid-template-rows: auto 1fr auto; >.content < /* явно прописываем номер строки, когда она не равна 1 */ -ms-grid-row: 2; /* кладём элемент в начало ячейки по вертикали */ /* чтобы его высота была равна высоте контента */ -ms-grid-row-align: start; align-self: start; border: 1px dotted red; >footer < /* явно прописываем номер строки, когда она не равна 1 */ -ms-grid-row: 3; >.content < -ms-grid-row: 2; border: 1px dotted red; >footer

 
header
 
content
  

Отслеживать
ответ дан 2 янв 2017 в 12:26
Vadim Ovchinnikov Vadim Ovchinnikov
9,644 4 4 золотых знака 35 35 серебряных знаков 72 72 бронзовых знака

Можно ещё так, с проверкой (если мало контента, то фиксировать, иначе статика):

if( $(document).height()

.page-footer < padding: 1rem; background: #333; color: #fff; text-align: center; >.page-footer.fixed-bottom

 
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, harum. Sapiente dignissimos in provident fugit voluptatem commodi, ipsa blanditiis assumenda quasi amet excepturi nostrum voluptatum molestiae ratione, corrupti hic voluptatibus.
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum accusamus cum voluptas voluptate esse asperiores cupiditate velit quaerat optio, praesentium ipsa, deserunt veniam facilis libero accusantium! Similique accusamus assumenda beatae amet harum delectus quisquam minima quidem id veniam a eaque iste labore distinctio quia cupiditate, ullam suscipit. Repellendus, porro, officiis!
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero atque officia, hic iure placeat, dolores amet eaque quae, eveniet laboriosam voluptatibus fugit velit aut. Facilis expedita, id quasi asperiores molestiae, numquam provident consectetur maxime ad dolorem illo, voluptas dolore accusantium quam deleniti enim ratione doloremque cum omnis ea maiores, deserunt earum eveniet minima eaque. Soluta earum amet esse rem vitae eaque enim aut obcaecati laudantium provident eius delectus nulla doloremque omnis quisquam, ut eos modi, autem tenetur! Deserunt pariatur cum aspernatur aperiam, obcaecati libero, tenetur veritatis aut praesentium architecto optio perspiciatis quo ut. Atque, soluta doloribus recusandae quibusdam ipsam qui!
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, unde.
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus perspiciatis molestiae nemo soluta nesciunt alias porro impedit, perferendis molestias possimus mollitia asperiores laboriosam consectetur enim odit, animi facere earum consequatur in veniam neque quae esse. Beatae iure laboriosam optio? Pariatur.
 
  

if( $(document).height()

.page-footer < padding: 1rem; background: #333; color: #fff; text-align: center; >.page-footer.fixed-bottom

  
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, harum. Sapiente dignissimos in provident fugit voluptatem commodi, ipsa blanditiis assumenda quasi amet excepturi nostrum voluptatum molestiae ratione, corrupti hic voluptatibus.
 
  

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

Помнится мне, в тот момент, когда я стал переходить с таблиц на верстку дивами, одной из трудностей, с которыми я столкнулся, была следующая — как прижать подвал сайта (footer) в самый низ окна браузера, чтобы страница при этом выглядела вытянутой на всю высоту, вне зависимости от объема текста, а при высоте страницы, большей, чем высота окна браузера (при появлении скролла), футер оставался бы на положенном ему месте. Если с помощью таблиц сия задача решается лишь за счет указания высоты для таблицы и/или вложенной в нее ячейки, то при использовании CSS в блочной верстке применяется совсем иной подход. В процессе практики я выделил для себя 5 способов прижимания футера к низу окна браузера с помощью CSS. HTML-код всех представленных способов имеет следующую структуру (отличие лишь в CSS-коде):

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

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

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

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

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

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

* < 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% высоты окна браузера. Живой пример 2-го способа

Третий способ

Он хорош тем, что, в отличие от остальных способов (кроме 5-го), высота футера значения не имеет. CSS-код:

* < margin: 0; padding: 0; >html, body < height: 100%; >.wrapper < display: table; height: 100%; >.content

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

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

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

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

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

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

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

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

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

Смотрите также

FireFox и вертикальное выравнивание текста в input[submit]

67 комментариев

Либо я плохо искал, либо проблема только у меня и я чего-то не знаю (в чем сомневаюсь), но в Интернете по сабжу ничего не нашел. Поэтому данный пост — это вопрос к читателям. При верстке форм я давно наблюдаю следующую проблемную ситуацию: независимо .

10 фиксов, решающих проблемы Internet Explorer 6

58 комментариев

Данный пост основан на переводе интересной англоязычной статьи «10 Fixes That Solve IE6 Problems». Информация, изложенная ниже, будет полезна как начинающим верстальщикам, там и бывалым. Зеленым цветом я пометил пункты, содержимое которых полностью .

Верстаем кроссбраузерный «резиновый» макет страницы

25 комментариев

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

Цвет курсора в поле input и кроссбраузерность

28 комментариев

Однажды я верстал страницу, на которой присутствовало текстовое поле поисковой формы. Ее особенность состояла в том, что фон был темно-серого цвета (с текстом белого цвета), с чем я встретился впервые за всю свою практику. И я с удивлением обнаружил, что .