Как прижать 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.