ブートストラップのフッター[複製]

Question

ブートストラップでWebレスポンシブフレキシブルフッターを作成しようとしています。これはページの下部にあります（コンテンツがページの下部に少ない場合、コンテンツが増える場合はそれに応じて変更します）。これは私が使用している私のコードです。私は何が欠けているか、間違っているのですか。ブートストラップの初心者で、バージョン4.5.0を使用しています。前もって感謝します

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

これは私のCSSです

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

これは、特定のサイズで表示しようとしたときの画面です。フォッターは画面に収まるほど長くなりません。しかし、別の画面にあるときは問題ありません

私のフッターはこのdivの中にあり、ページを検査するときに全画面幅がありません。最小幅を100％と100vhに追加してみました

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

}

Answer 1

d-flex flex-column min-vh-100メインコンテナとmt-auto手段margin-top autoにブートストラップ組み込みクラスを使用できますfooter。したがって、フッターは常にコンテンツに応じてページの下部に表示されます。以下は同じスニペットです

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