Как прижать footer к низу экрана?
Есть основной блок
.container
header content Отслеживать
7,291 5 5 золотых знаков 27 27 серебряных знаков 69 69 бронзовых знаков
задан 20 июл 2016 в 7:47
737 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,291 5 5 золотых знаков 27 27 серебряных знаков 69 69 бронзовых знаков
Если надо чтобы решение на 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.
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.
Как прижать footer к низу без дополнительного div (обёртки)?
Нашёл массу способов прижатия футера к низу страницы, но все они основаны на дополнительном div (wrapper или обертка), который обычно помещается между head и footer. Есть ли простой способ прижать вот в этом случае (без дополнительного div)?
.b-page < width:100%; margin:0; >.b-page__head-line < height: 150px; display: table; width: 100%; >.b-page__line < width: 960px; margin: 0 auto; margin-top:35px; >.b-page__main < width: 1100px; margin: 0 auto; margin-top:35px; >.b-page__footer
- Вопрос задан более трёх лет назад
- 4061 просмотр
Как привязать футер к низу страницы
Сегодня найдем окончательное надежное решение вопроса как средствами css прижать футер к низу страницы с помощью css и html. Притянуть футер низ страницы. Также этим способом можно отцентровать контент content по середине страницы.
Для того чтобы прижать footer к низу страницы нужно создать определенную структуру html:
После того как структура страницы готова, приступаем к настройке css.
Нам нужно сделать так чтобы html и body занимали всю высоту страницы (full screen height). А блок wrapper имел минимально высоту экрана, а контент его бы растягивал как нужно. Дальше нам нужно прижать футер к низу страницы или к низу экрана так чтобы он всегда оставался ниже контента, а если контента мало но футер прижимается в низу экрана. Также контенту нужно сделать отступ внизу для футера.
Прижать футер к низу экрана css код:
html, body < height: 100%; >.wrapper < position: relative; min-height: 100%; >.main < padding-bottom: 80px; >.footer
Этот способ работает только в случае фиксированного футера. Это означает что footer прижать к низу страницы будет сложнее если высота его динамическая, так как надо будет предусмотреть правильный нижний отступ для div с классом main. Тут уже нужен будет javascript и понадобится информация как в мобильном браузере получить высоту экрана.
В большинстве случаев footer футре в низу страницы фиксированной высоты, поэтому этот способ работает без проблем.
Если вы знаете более простой способ, или нашли ошибки в этом способе — регистрируйтесь и пишите комментарии. Будем вместе искать идеальный рабочий способ привязки футера к низу страницы.
Читайте также:
- Отцентровать popup с помощью css
- Как привязать футер к низу страницы
- Настройка PhpStorm pug (jade) и less Watchers
- Текст в одну строку и троеточие в конце CSS
- Height 100vh for mobile browsers iPhone and Android