Vaste voettekst in bootstrap

Ik probeer bootstrap en ik vroeg me af, hoe ik de voettekst op de bodem kan repareren zonder het te hebben verdwijnen van de pagina als de inhoud wordt gescrold?

Antwoord 1, Autoriteit 100%

Om een ​​voettekst te krijgen die zich aan de onderkant van uw viewport plakt, geef het dan een vaste positie als deze:

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

Bootstrap bevat deze CSS in de Navbar & GT; Plaatsingsgedeelte met de klas fixed-bottom. Voeg deze klasse toe aan je voettekstelement:

<footer class="fixed-bottom">

Bootstrap Docs: https://getbootstrap.com/docs/4.4/ Hulpprogramma’s / Positie / # Fixed-Bottom

Antwoord 2, Autoriteit 37%

Voeg dit toe:

<div class="footer navbar-fixed-bottom">

https://stackoverflow.com/a/21604189

EDIT: Klasse navbar-fixed-bottomis gewijzigd in fixed-bottomvanaf Bootstrap V4-Alpha.6.

http://v4-alpha.getbootstrap.com/componenten/navbar/## plaatsing

Antwoord 3, Autoriteit 4%

vaste onderkant :

<div class="footer fixed-bottom">

Antwoord 4

Voeg z-index:-9999;toe aan deze methode, anders wordt je bovenste balk bedekt als je 1hebt.

Antwoord 5

Een andere oplossing:

U kunt “min-height: 80vh;” gebruiken.

Hiermee kunt u de minimale hoogte instellen met behulp van de kijkvensterhoogte.

Voorbeeld met bootstrap :

<style>
main {
   min-height: 80vh;
   height: auto !important;
   height: 100%;
   margin: 0 auto -60px;
}
</style>
<main class="container">
    <!-- Your page content here... -->
</main>
<footer class="footer navbar-fixed-bottom">
    <!-- Your page footer here... -->
</footer>

<style>
#wrap {
   min-height: 100%;
   height: auto !important;
   height: 100%;
   margin: 0 auto -60px;
}
</style>
<div id="wrap">
    <!-- Your page content here... -->
</div>