Для прижатия футера к низу страницы вам необходимо применить несколько CSS-правил. Вот несколько подходов, которые вы можете использовать для достижения этой цели:
- Метод flexbox
Используйте свойство flex на контейнере страницы и установите у него значение 1 0 auto, а затем задайте min-height: 100vh; для обертки страницы и margin-top: auto; для футера. Это заставит футер расположиться внизу страницы.
<body>
<div class="wrapper">
<header>Header</header>
<main>Content</main>
</div>
<footer>Footer</footer>
</body>
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
display: flex;
flex-flow: column;
}
main {
flex: 1;
}
footer {
margin-top: auto;
}
- Метод absolute positioning
Установите позиционирование для футера, используя position: absolute; bottom: 0;. Также необходимо выставить min-height: 100%; для корневого элемента страницы и задать padding-bottom: footerHeight; (где footerHeight — это высота футера) для контейнера с контентом. Это гарантирует, что футер всегда будет прижат к нижней части экрана.
<body>
<div class="wrapper">
<header>Header</header>
<main>Content</main>
</div>
<footer>Footer</footer>
</body>
html, body {
height: 100%;
position: relative;
}
.wrapper {
min-height: 100%;
padding-bottom: footerHeight;
}
main {
overflow: hidden;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: footerHeight;
}
- Метод sticky footer
С помощью flexbox установите min-height: calc(100vh - footerHeight); для контейнера страницы, а затем задайте margin-top: auto; для футера. Это создаст футер, который останется на нижней части страницы, и остальной контент страницы будет заполнен верхней частью страницы.
<body>
<div class="wrapper">
<header>Header</header>
<main>Content</main>
</div>
<footer>Footer</footer>
</body>
html, body {
height: 100%;
}
.wrapper {
display: flex;
flex-direction: column;
min-height: calc(100vh - footerHeight);
}
main {
flex: 1;
}
footer {
margin-top: auto;
}
Выберите один из этих подходов в зависимости от потребностей вашего проекта и используйте его для прижатия вашего футера к низу страницы.
