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?
Odpowiedzi:
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
fixed-bottom
nie zrobiłem tego, czego się spodziewałem, zamiast tego static-bottom
przestrzegałem wysokości zawartości strony.
Dodaj:
<div class="footer navbar-fixed-bottom">
https://stackoverflow.com/a/21604189
EDYCJA: klasa navbar-fixed-bottom
została zmieniona na fixed-bottom
wersję Bootstrap v4-alpha.6.
http://v4-alpha.getbootstrap.com/components/navbar/#placement
Dodaj:
<div class="footer fixed-bottom">
Dodaj z-index:-9999;
do tej metody lub zakryje ona górny pasek, jeśli masz 1
.
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.
Możesz sprawdzić ten przykład: http://getbootstrap.com/2.3.2/examples/sticky-footer.html