Как сделать чтобы футер был всегда внизу страницы на bootstrap?
Как сделать чтобы футер был всегда внизу страницы на bootstrap?
3 ответа
@cooper.berge
Для того чтобы футер был всегда внизу страницы на Bootstrap, можно использовать следующий код:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<body>
<div class="container-fluid p-0">
<!-- Ваш контент -->
</div>
<footer class="bg-light py-3">
<!-- Ваш футер -->
</footer>
</body>
<style>
html,
body {
height: 100%;
}
.container-fluid {
min-height: 100%;
display: flex;
flex-direction: column;
}
footer {
flex-shrink: 0;
}
</style>
|
Этот код создает футер, который всегда отображается внизу страницы, даже когда контент занимает много места.
@cooper.berge
Вы можете использовать CSS-свойство position: fixed со значением bottom: 0 для футера, чтобы зафиксировать его внизу экрана. Вы можете применить это свойство к классу футера в вашем CSS-файле:
1 2 3 4 5 |
.footer { position: fixed; bottom: 0; width: 100%; } |
Это должно решить вашу проблему.
@cooper.berge
Для того, чтобы футер всегда отображался внизу страницы в Bootstrap, вам нужно использовать CSS свойство "position: absolute" и "bottom: 0". Также, ваш контейнер содержащий футер, должен иметь относительное позиционирование.
Пример кода:
1 2 3 4 5 6 |
<div class="container-fluid" style="position: relative;">
<!-- Your main content -->
<footer style="position: absolute; bottom: 0; width: 100%;">
<!-- Your footer content -->
</footer>
</div>
|