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

CSS: flexbox で固定フッターを表示（サンプルコードあり）

2019年7月31日

コンテンツの量に関わらず、常に画面下部にフッターを表示する例です。こちらの記事で紹介している実装と比較し、３箇所ほど追加することで対応することができます。

実装例

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        body {
            margin: 0px;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            overflow-y: hidden; /*追加*/
        }
        header {
            background: lightpink;
        }
        main {
            background: lightblue;
            flex: 1;
            max-height: calc(100vh - 48px); /*追加*/
            overflow-y: auto; /*追加*/
        }
        footer {
            background: lightgreen;
        }
    </style>
</head>
<body>
    <header>
        head
    </header>
    <main>
        <div>main</div>
        <div>main</div>
        <div>main</div>
        <div>main</div>
        <div>main</div>
        <div>main</div>
        <div>main</div>
        <div>main</div>
        <div>main</div>
        <div>main</div>
        <div>main</div>
        <div>main</div>
        <div>main</div>
        <div>main</div>
        <div>main</div>
        <div>main</div>
        <div>main</div>
        <div>main</div>
        <div>main</div>
        <div>main</div>
        <div>main</div>
        <div>main</div>
        <div>main</div>
        <div>main</div>
        <div>main</div>
        <div>main</div>
        <div>main</div>
        <div>main</div>
        <div>main</div>
        <div>main</div>
        <div>main</div>
    </main>
    <footer>
        footer
    </footer>
</body>
</html>

実行結果

画面下部にフッターが表示されており、縦スクロールの位置に関わらず、フッターが常に表示領域にあることが分かります。

-CSS