Fußzeile im Bootstrap [Duplikat]

Question

Ich versuche, eine webreaktive flexible Fußzeile in Bootstrap zu erstellen, die sich am Ende der Seite befindet (wenn der Inhalt am Ende der Seite geringer ist und der Inhalt zunimmt, ändern Sie sich entsprechend). Dies ist mein Code, den ich benutze. Was vermisse ich oder mache ich falsch? Anfänger im Bootstrap und mit Version 4.5.0. Vielen Dank im Voraus

   <footer class="footer">
       <div class="container-fluid">
          <ul class="footertext">
                <li class="list">
                    About Us
                </li>
                <li class="list">
                    Contact Us
                </li>
            </ul>
             


         </div>
   </footer>

Das ist mein CSS

 .footer {
        position: absolute;
        bottom: 0;
        width: 100%;    
        background-color: black;
    }

Dies ist der Scrrenshot, wenn ich versuche, ihn in einer bestimmten Größe zu sehen. Der Fotter wird nicht lang genug, um auf den Bildschirm zu passen. Aber wenn es auf einem anderen Bildschirm ist, ist es in Ordnung

Meine Fußzeile befindet sich in diesem Bereich, der beim Überprüfen der Seite nicht die volle Bildschirmbreite hat. Ich habe versucht, 100% und 100vh mit einer minimalen Breite zu versehen

 .page-container {
position: relative;
min-height: 100vh;
/*min-width: 100%;*/

}}

Answer 1

Sie können die eingebaute Bootstrap-Klasse d-flex flex-column min-vh-100für Ihren Hauptcontainer und Ihre mt-autoMittel verwenden . Ihre Fußzeile befindet sich also immer am Ende der Seite, je nach Inhalt. Unten ist das Snippet für das gleichemargin-top autofooter

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container-fluid d-flex flex-column min-vh-100 text-center">
  <section>
    <h1>My content</h1>
  </section>
  <footer class="mt-auto text-light bg-dark pt-2 pb-2">footer</footer>
</div>