Как прижать footer к низу экрана?
1,00
р.
Есть основной блок с контентом различной высоты, а под ним размещён футер.
Если контент не достигает всей высоты экрана, нужно чтобы блок .container занимал всё свободное место окна браузера. При этом футер должен быть внизу страницы и оставаться видимым.
Футер может менять высоту, но при этом он должен оставаться прижатым к нижнему краю окна браузера.
.container { background: #fff margin: auto height: auto width: 900px } header content footer
Ответ
Для прижатия футера к низу экрана, есть несколько решений. Ниже представлены варианты от самого актуального до устаревшего:
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 { background: black } header content footer
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 footer
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 { background: black } header content footer
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 footer
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 footer
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 footer
Если контент не достигает всей высоты экрана, нужно чтобы блок .container занимал всё свободное место окна браузера. При этом футер должен быть внизу страницы и оставаться видимым.
Футер может менять высоту, но при этом он должен оставаться прижатым к нижнему краю окна браузера.
.container { background: #fff margin: auto height: auto width: 900px } header content footer
Ответ
Для прижатия футера к низу экрана, есть несколько решений. Ниже представлены варианты от самого актуального до устаревшего:
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 { background: black } header content footer
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 footer
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 { background: black } header content footer
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 footer
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 footer
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 footer
