flexbox でフッターを表示する

📋 目次（クリックで展開）

css の flexbox を使い、フッターを表示します。

ページの body には、min-height で高さを明示しておきます。body の中に配置されている ヘッダー(header)、メイン(main)、フッター(footer) は flexbox で縦並び(flex-direction: column)にします。ヘッダーとフッターには flex プロパティを指定せず、メインに対してのみ flex: 1; を指定します。すると、メインの領域がコンテンツに応じて自動的に伸縮するので、結果としてメインに高さが無い場合にもフッターはページ下部に表示されます。コンテンツが縦幅を超えると、フッターは画面の下に移動します。

<!DOCTYPE html>
<html lang="en">


<head>
    <style>
        body {
            margin: 0px;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }


        header {
            background: lightpink;
        }


        main {
            background: lightblue;
            flex: 1;
        }


        footer {
            background: lightgreen;
        }
    </style>
</head>


<body>
    <header>
        head
    </header>
    <main>
        <div>main</div>
        <div>main</div>
        <div>main</div>
    </main>
    <footer>
        footer
    </footer>
</body>


</html>

実行結果

💬 コメント