フッターを簡単に最下部に固定する方法

結論 フレックスボックスの「justify-content: space-between;」をうまく使用する

下記例のように、bodyにheight: 100vh;、.wrapにmin-height: 100%; display: flex; flex-direction: column; justify-content: space-between;を指定することで、footerを最下部に固定できる。
ここでいう最下部に固定とは、コンテンツが画面高さより低い場合は画面最下部に、コンテンツが画面高さよりも高い時には、コンテンツの最下部にフッターが来るようになる。

常に画面最下部に固定する方法は別途備忘録として残そうと思う。

コード例

サンプルページ

上記コードは、2019/3/11時点のlarave-Sampleトップページのコードの一部です。
larave-Sampleトップページ

追記

他にも方法はいろいろあります。
例えば、flexboxのflex-growなどを使用する方法などです。
コードペンにサンプルコードを書きました。

Just a moment...
タイトルとURLをコピーしました