はじめに
Bootstrap4.6を使用してサイトを作成した際に、<body></body>の中のコンテンツが少ないと中身に合わせてフッターの位置が上に上がってしまっていました。
こんな感じです。
下に空間があってなんとなくかっこ付かないので、この表示を解消する方法を探してみることにしました。
ちょっと違う…となったやり方
「Bootstrap フッター 固定」というような内容で検索して良く見つかるのが「fixed-bottom」を設定するという方法です。
実際にfotterタグの部分に追加してみました。
<footer class="bg-dark fixed-bottom">
<div class='container mt-5'>
<div class='row'>
<div class='mx-auto text-white'>
<p>Copyright © sample All Rights Reserved.</p>
</div>
</div>
</div>
</footer>
確かにさっきのログインページで見たらきちんとページの最下部に配置されましたが、コンテンツが多くなるとこんな表示になってしまいました。
確かに下に固定されています。
ただ、画面が狭くなってしまい、私がやりたかった表示方法とはちょっと違いました。
また、下に余白がないとコンテンツが隠れてしまったり、この表示を採用する際は少し調整が必要そうです。
結論…やりたかったのはこれ
試した結果一番しっくり来たのはこの方法でした。
先ほどはfooterのclassに記述を追加しましたが、こちらの方法ではbody全体のclassに記述しています。
<body class="d-flex flex-column vh-100">
<%= render 'layouts/header' %>
<main class="mb-auto">
<%= yield %>
</main>
<%= render 'layouts/footer' %>
</body>
bodyの中に、
「header（部分テンプレート）」
「main」
「footer（部分テンプレート）」
が並んでいる形になります。
これらを「d-flex flex-column」で上から順番に並べて、body自体の高さをvh（ビューポート単位のheight）を100%で指定しています。
これだけだとまだfooterの位置を指定できていないので、mainに「mb-auto」を設定してコンテンツを下端まで寄せます。
ちなみに特に触っていませんが、フッターの中はこうなっています。
さっきの「fixed-bottom」をなくしたバージョンです。
<footer class="bg-dark">
<div class='container mt-5'>
<div class='row'>
<div class='mx-auto text-white'>
<p>Copyright © sample All Rights Reserved.</p>
</div>
</div>
</div>
</footer>
この記述で、ようやくフッターを下に配置することが出来ました…！
コンテンツの中身が多くなったときはこんな感じの動きになります。
おわりに
CSSに記述する方法もあったのですが、せっかくBootstrapを使っているからBootstrapで解決させたいと思って試行錯誤してみました。
コンテンツの中央寄せや横並びなど、配置の動かし方がいまいち理解しきれていない部分があるので、タグの設定や理屈を理解して上手に活用できるようにしたいです。