結論 フレックスボックスの「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...
codepen.io
