記事内に広告が含まれています。

flexbox でフッターを表示する

2019年7月30日

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>
実行結果

-CSS