Bootstrap5でFooterを下部に固定する

山田ハヤオ

November 30, 2022

<body>
    <div class="container-fluid position-relative vh-100">
        <div class="row">
            色々ヘッダーとかコンテンツ
        </div>

        <div class="row position-absolute bottom-0 w-100">
            <footer>
                フッターの内容
            </footer>
        </div>
</body>

参考にしたSEO汚染系量産型プログラミングスクールのサイトはこちら

よく見る手法だけどBootstrapで実装してるやつがパッと見なかったのでメモ

position-relativeとかまだ良く理解できてないかもしれない。

box-sizing: border-box;はBootstrapではデフォルトでグローバルに当たってる。

position-relative vh-100を付けないとスクロールしたときに重なってしまって✞CSS完全に理解した✞状態になる。