投稿日：2022年05月23日 テクノロジー

こんにちは。前田です
webサイトを作るとき、フッターをページの最下部に固定したいけど、ページの内容が少ない場合フッターが浮いてしまうことはありませんか。
固定の方法はさまざまあるのですが、なかでもcssのflexを使用すると簡単に再現ができます。

親要素のdivにheader要素、main要素、footer要素といった子要素が囲まれている構成だったとして、
divに「display:flex;」「flex-direction: column;」「min-height: 100vh;」のスタイルを設定し、フッターに「margin-top: auto;」のスタイルを設定するものです。
「display:flex;」だけでは子要素が横並びになりますが、「flex-direction: column;」で縦並びにできます。
「min-height: 100vh;」ではdivの最小の高さを画面の高さに設定しています。
「margin-top: auto;」では、値を自動設定するautoを使って、フッターを最下部に配置します。