縦幅が小さいページでもfooterが下部に固定される方法

WEB制作界隈のTwitterでよく見るTAKさんの記事の内容を実際に試してみました。
（すごく有益な記事でした！ありがとうございます。）

縦幅が小さいページでもfooterが下部に固定されるように、記事通り以下のコードを書いてみました。

・HTML

<body>
    <div class="site-wrapper">
        <header></header>
        <main></main>
        <footer></footer>
    </div>
</body>

・CSS

.site-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
main {
    flex: 1;
    overflow-x: hidden;
}

これでどんなページでもfooterが下部に固定されるようです。

試しにheaderとfooterだけのページを作ってみた

試しにheaderとfooterだけのページを作ってみました。

See the Pen
Untitled by ゆーじろー (@yuji64)
on CodePen.

PC画面で見るとわかりやすいと思います。

headerとfooterだけのページですが、ちゃんとfooterが下部に固定されました。

404ページのようなコンテンツ量が少ないページだとfooterが下部に固定されない場合があるので、確かに全案件に書いておくべきコードだと感じました。