Для того, чтобы прикрепить footer к нижней части страницы в CSS, можно использовать несколько подходов.
- Абсолютное позиционирование. Чтобы прикрепить footer к нижней части страницы, можно использовать абсолютное позиционирование. Для этого нужно задать
position: absoluteиbottom: 0для footer:
.footer {
position: absolute;
bottom: 0;
}
Этот код прикрепляет footer к нижней части страницы.
- Flexbox. Еще один подход – использование flexbox. Для этого нужно задать
height: 100%для элементаbodyиdisplay: flex; flex-direction: column;для его дочернего элемента – контейнера с содержимым сайта. А затем нужно задатьmargin-top: autoдля footer:
body {
height: 100%;
display: flex;
flex-direction: column;
}
.container {
flex: 1;
}
.footer {
margin-top: auto;
}
Этот код прикрепляет footer к нижней части страницы, при этом контейнер с содержимым сайта занимает оставшуюся часть экрана.
- Grid. Третий подход – использование CSS Grid. Для этого нужно задать
display: grid; grid-template-rows: 1fr auto;для элементаbodyиgrid-row: 2для footer:
body {
display: grid;
grid-template-rows: 1fr auto;
}
.footer {
grid-row: 2;
}
Этот код прикрепляет footer к нижней части страницы, при этом первый ряд занимает все оставшееся пространство.
Важно учитывать, что финальный результат может зависеть от структуры и содержимого страницы.





