Bootstrap'te altbilgi [yineleme]

Question

Bootstrap'te sayfanın altında olacak web duyarlı esnek altbilgi yapmaya çalışıyorum (içerik sayfanın altında daha azsa ve içerik artarsa ​​buna göre değişir). Bu benim kullandığım kodum. Neyi kaçırıyorum veya yanlış yapıyorum. Başlangıç ​​seviyesinden başlayarak 4.5.0 sürümünü kullanıyor. Şimdiden teşekkür ederim

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

Bu benim css

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

Bu, onu belirli bir boyutta görmeye çalıştığım zamanki ekran görüntüsü. Fotter ekrana sığacak kadar uzun olmuyor. Ama başka bir ekranda olduğunda sorun yok

altbilgim, sayfayı incelediğimde tam ekran genişliğine sahip olmayan bu divin içinde. min-genişliği% 100 ve 100vh'ye eklemeyi denedim

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

}

Answer 1

Sen önyükleme dahili sınıfını kullanabilirsiniz d-flex flex-column min-vh-100ana konteyner ve için mt-autoaraçlar margin-top autoadresinden Müşteri footer. Böylece altbilginiz her zaman içeriğe göre sayfanın altında olacaktır. Aşağıda aynısı için snippet var

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