Stopka w bootstrapie [duplikat]

Question

Próbuję stworzyć elastyczną stopkę responsywną w bootstrapie, która będzie na dole strony (jeśli zawartość jest mniej na dole strony i jeśli zawartość wzrośnie, to odpowiednio się zmień). To jest mój kod, którego używam. Czego mi brakuje lub co robię źle. Początkujący w bootstrapie i używaniu wersji 4.5.0. Z góry dziękuję

   <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>

To jest mój css

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

to jest zrzut ekranu, gdy próbuję go zobaczyć w jednym określonym rozmiarze. Fotter nie jest wystarczająco długi, aby zmieścić się na ekranie. Ale kiedy jest na innym ekranie, jest w porządku

moja stopka znajduje się wewnątrz tego elementu div, który nie ma pełnej szerokości ekranu, gdy sprawdzam stronę. Próbowałem dodać min-width do 100% i 100vh również

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

}

Answer 1

Możesz użyć wbudowanej klasy bootstrap d-flex flex-column min-vh-100dla swojego głównego kontenera i mt-autośrodków margin-top autodo swojego footer. Twoja stopka zawsze będzie znajdować się na dole strony odpowiednio do treści. Poniżej znajduje się fragment tego samego

<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>