Как прижать footer к низу страницы
Назначение футера заключается в том, что он «прилипает» к нижней части
окна браузера. Если на странице достаточно контента, чтобы сдвинуть его,
то так и будет. Но если содержимое на странице короткое, тогда футер
будет висеть посередине экрана. Для того чтобы этого не происходило
существует несколько способов, как прижать footer к низу экрана.
Способ 1. Отрицательный margin для wrapper
Создадим два соседних блока wrapper и footer. Для wrapper зададим нижний минусовый отступ равен высоте футера.
HTML
<body> <div class="wrapper"><p> content</p><p> <div class="push"></div> </div> <footer class="footer"></footer> </body> </p>
CSS
html, body {
height: 100%;
margin: 0;
}
.wrapper {
min-height: 100%;<p> /* Equal to height of footer */
/* But also accounting for potential margin-bottom of last child */
margin-bottom: -50px;
}
.footer,
.push {
height: 50px;
}
</p>Для этого требуется дополнительный элемент внутри wraper (“push”), чтобы гарантировать, что отрицательный margin не подтянет footer и не закроет какой-либо контент.
Способ 2.
Отрицательный margin для footer
Этот метод не требовал использования элемента push, но вместо этого требовался дополнительный элемент обтекания вокруг содержимого, к которому нужно применить соответствующий нижний отступ. Опять же, чтобы избежать отрицательного поля поднять нижний колонтитул над любым содержимым
HTML
<body>
<div class="content">
<div class="content-inside">
content
</div>
</div>
<footer class="footer"></footer>
</body>
CSS
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%.
HTML
<body>
<div class="content">
content
</div>
<footer class="footer"></footer>
</body>
CSS
.content {
min-height: calc(100vh - 70px);
}
.footer {
height: 50px;
}
Обратите внимание на 70px в calc () и фиксированную высоту футера 50px. Предположим, что последний элемент в content имеет margin-bottom в 20 пикселей. Именно это нижнее поле плюс высоту футера необходимо сложить вместе, чтобы вычесть из высоты области просмотра. И да, мы используем здесь относительные единицы, как еще один маленький трюк, чтобы избежать необходимости устанавливать 100% высоты тела, прежде чем вы сможете установить 100% высоты контента.
Способ 4. С помощью flexbox
Большая проблема с вышеупомянутыми тремя методами состоит в том, что они требуют футер фиксированной высоты. Фиксированные высоты, как правило, содержание может измениться. Использование flexbox для футера колонтитула не только не требует дополнительных элементов, но и позволяет использовать футер переменной высоты.
HTML
<body>
<div class="content">
content
</div>
<footer class="footer"></footer>
</body>
CSS
html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
.content {
flex: 1 0 auto;
}
.footer {
flex-shrink: 0;
}
Способ 5. С помощью Grid
Разметка с помощью сетки еще новее (и менее широко поддерживается), чем flexbox. Вы также можете довольно легко использовать его для прилипания футера к низу страницы.
HTML
<body>
<div class="content">
content
</div>
<footer class="footer"></footer>
</body>
CSS
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.