Naprawiono stopkę w Bootstrap

86

Staram się Bootstrap i zastanawiałem się, w jaki sposób mogę rozwiązać stopkę na dole bez zniknie ze strony, jeśli treść jest przewijane?

stdcerr
źródło

Odpowiedzi:

208

Aby stopka przylegała do dolnej części widocznego obszaru, nadaj jej stałą pozycję, taką jak ta:

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

Bootstrap zawiera ten CSS w sekcji Navbar> Placement z klasą fixed-bottom. Po prostu dodaj tę klasę do elementu stopki:

<footer class="fixed-bottom">

Dokumentacja Bootstrap: https://getbootstrap.com/docs/4.4/utilities/position/#fixed-bottom

Josh KG
źródło
To i komentarz @ Daniel-Tero zrobiły to za mnie.
jmng
4
Jeśli strona przewija się, nie działa poprawnie.
Arnab
2
fixed-bottomnie zrobiłem tego, czego się spodziewałem, zamiast tego static-bottomprzestrzegałem wysokości zawartości strony.
Gjaa
7

Dodaj:

<div class="footer fixed-bottom">
Matheus Gomes
źródło
3

Dodaj z-index:-9999;do tej metody lub zakryje ona górny pasek, jeśli masz 1.

Daniel Tero
źródło
0

Możesz to zrobić, umieszczając zawartość strony w elemencie div z zastosowaniem następującego stylu id:

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

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

Pracował dla mnie.

Panie Porcupine
źródło
-4

Możesz sprawdzić ten przykład: http://getbootstrap.com/2.3.2/examples/sticky-footer.html

Vladimir Dimchev
źródło
2
To dla lepkiej stopki, a nie stałej stopki: /
az_
@aaronz jaka jest różnica?
Arsen Ibragimov
4
@ArsenIbragimov Przyklejona stopka jest wypychana na koniec strony, jeśli zawartość jest wyższa niż widok. Stała stopka jest zawsze widoczna u dołu widoku.
az_