Фиксированный нижний колонтитул в Bootstrap

86

Я пробую Bootstrap, и мне было интересно, как я могу исправить нижний колонтитул внизу, чтобы он не исчезал со страницы при прокрутке содержимого?

html css twitter-bootstrap footer stdcerr
источник

Ответы:

208

Чтобы нижний колонтитул прилипал к нижней части области просмотра, задайте ему фиксированное положение, например:

footer {
    position: fixed;
    height: 100px;
    bottom: 0;
    width: 100%;
}

Bootstrap включает этот CSS в раздел Navbar> Placement с классом fixed-bottom. Просто добавьте этот класс в свой нижний колонтитул:

<footer class="fixed-bottom">

Документы начальной загрузки: https://getbootstrap.com/docs/4.4/utilities/position/#fixed-bottom

Джош К.Г.
источник
Это и комментарий @ Daniel-Tero сделали это для меня.
jmng
4
Если на странице есть прокрутка, она работает неправильно.
Арнаб
2
fixed-bottomне сделал то, что я ожидал, я сделал вместо этого, static-bottomчтобы уважать высоту содержимого страницы.
Gjaa
7

Добавь это:

<div class="footer fixed-bottom">
Матеус Гомес
источник
3

Добавьте z-index:-9999;к этому методу, иначе он закроет вашу верхнюю панель, если у вас есть 1.

Даниэль Теро
источник
0

Вы можете сделать это, обернув содержимое страницы в div со следующим стилем идентификатора:

<style>
#wrap {
   min-height: 100%;
   height: auto !important;
   height: 100%;
   margin: 0 auto -60px;
}
</style>

<div id="wrap">
    <!-- Your page content here... -->
</div>

Работал у меня.

Мистер дикобраз
источник
-4

Вы можете проверить этот пример: http://getbootstrap.com/2.3.2/examples/sticky-footer.html

Владимир Димчев
источник
2
Это для липкого
нижнего
@aaronz какая разница?
Арсен Ибрагимов
4
@ArsenIbragimov Прикрепленный нижний колонтитул сдвигается до конца страницы, если контент выше, чем вид. Фиксированный нижний колонтитул всегда отображается внизу представления.
az_