Если вы хотите прижать футер к низу страницы на CSS, здесь несколько способов это сделать:
- Метод Flexbox
С помощью Flexbox можно легко прижать футер к нижней части экрана. Для этого установите свойства display: flex; flex-direction: column;
для родительского элемента страницы, затем установите flex: 1;
для основного контейнера сайта и margin-top: auto;
для футера.
<body>
<div class="site-content">
<header><p>Header</p></header>
<main><p>Main content</p></main>
</div>
<footer><p>Footer</p></footer>
</body>
html, body {
height: 100%;
}
body {
margin: 0;
display: flex;
flex-direction: column;
}
.site-content {
flex: 1;
}
footer {
margin-top: auto;
}
- Метод Grid
Также можно использовать Grid для распределения страницы на строки и столбцы и прижимать футер к нижней части страницы. Для этого установите свойства display: grid; grid-template-rows: auto 1fr auto;
для родительского элемента страницы, где 1fr
означает, что основной контент будет занимать все доступное пространство между заголовком и футером.
<body>
<div class="site-content">
<header><p>Header</p></header>
<main><p>Main content</p></main>
</div>
<footer><p>Footer</p></footer>
</body>
html, body {
height: 100%;
}
body {
margin: 0;
display: grid;
grid-template-rows: auto 1fr auto;
}
.site-content {
grid-row: 2 / 3;
}
footer {
grid-row: 3 / 4;
}
- Метод position: fixed
Установите height: 100%;
и position: fixed;
для футера, и он будет зафиксирован внизу страницы. Учтите, что это может иметь нежелательные последствия для пользователей с маленькими экранами.
<body>
<div class="site-content">
<header><p>Header</p></header>
<main><p>Main content</p></main>
</div>
<footer><p>Footer</p></footer>
</body>
html, body {
height: 100%;
}
footer {
position: fixed;
bottom: 0;
width: 100%;
height: 80px;
}
Выберите подход, который наилучшим образом подходит для вашего проекта и используйте его для прижимания футера к нижней части страницы.