## Способ 1. Flexbox (рекомендуемый)
Самый современный и надёжный способ.
Код
<div class="container">
<main class="content">
<!-- Основной контент -->
</main>
<footer class="footer">
Мой футер
</footer>
</div>
<main class="content">
<!-- Основной контент -->
</main>
<footer class="footer">
Мой футер
</footer>
</div>
Код
html, body {
height: 100%;
margin: 0;
}
.container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.content {
flex: 1; /* Занимает всё свободное пространство */
}
.footer {
/* Стили футера */
}
height: 100%;
margin: 0;
}
.container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.content {
flex: 1; /* Занимает всё свободное пространство */
}
.footer {
/* Стили футера */
}
**Как работает:**
* `min-height: 100vh` — контейнер занимает минимум всю высоту экрана.
* `flex-direction: column` — элементы располагаются вертикально.
* `flex: 1` на `.content` заставляет основной контент занять всё доступное пространство, «отталкивая» футер вниз.
## Способ 2. Абсолютное позиционирование
Подходит, если футер имеет фиксированную высоту.
Код
html, body {
height: 100%;
margin: 0;
}
.container {
position: relative;
min-height: 100%;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px; /* Фиксированная высота футера */
}
height: 100%;
margin: 0;
}
.container {
position: relative;
min-height: 100%;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px; /* Фиксированная высота футера */
}
**Нюансы:**
* Контент может перекрываться футером, если его много.
* Обязательно задать `height` футеру.
* Родительский контейнер должен иметь `position: relative`.
## Способ 3. Функция `calc()`
Используется, когда нужно вручную рассчитать высоту основного контента.
Код
html, body {
height: 100%;
margin: 0;
}
.content {
min-height: calc(100vh - 60px); /* 100% высоты экрана минус высота футера */
}
.footer {
height: 60px;
}
height: 100%;
margin: 0;
}
.content {
min-height: calc(100vh - 60px); /* 100% высоты экрана минус высота футера */
}
.footer {
height: 60px;
}
**Плюсы:** Простота.
**Минусы:** Жёсткая привязка к высоте футера. Если она изменится, нужно править `calc()`.
## Способ 4. Имитация таблицы (`display: table`)
Старый способ, но всё ещё рабочий.
Код
html, body {
height: 100%;
margin: 0;
}
.container {
display: table;
width: 100%;
height: 100%;
}
.content, .footer {
display: table-row;
}
.content {
height: 100%; /* Занимает всё пространство */
}
.footer {
height: 60px;
}
height: 100%;
margin: 0;
}
.container {
display: table;
width: 100%;
height: 100%;
}
.content, .footer {
display: table-row;
}
.content {
height: 100%; /* Занимает всё пространство */
}
.footer {
height: 60px;
}
**Недостатки:** Менее гибкий, чем Flexbox. Табличная вёрстка не всегда семантически верна.
## Способ 5. Родитель на 100 % высоты
Базовый вариант, который работает в связке с другими методами.
Код
html {
height: 100%;
}
body {
min-height: 100%;
margin: 0;
display: flex;
flex-direction: column;
}
footer {
margin-top: auto; /* «Прижимает» футер вниз */
}
height: 100%;
}
body {
min-height: 100%;
margin: 0;
display: flex;
flex-direction: column;
}
footer {
margin-top: auto; /* «Прижимает» футер вниз */
}
**Рекомендация:** Используйте **Flexbox** (Способ 1). Он:
* поддерживается всеми современными браузерами;
* не требует знания высоты футера;
* автоматически адаптируется к изменению контента;
* считается лучшей практикой в современной вёрстке.
