footerを最下部に固定できずお困りの方へ
スクール時代にポートフォリオ作成の際、数人の方がこの問題に息詰まっていました。
この方法を教えたら一瞬で解決できましたので、同じようにお困りの方はこの方法をお試しください。
みんながよく使うfooterの固定方法
①bodyにposition:releative;を指定し、footerにposition:absolute;とbottom:0;でbodyの最下部に固定する。mainがfooterの下に入り込まないようにfooterの高さ分のpadding-bottomをbodyに指定。
②footerにposition:fixed;とbottom:0;でbodyの最下部に固定。mainがfooterの下に入り込まないようにfooterの高さ分のpadding-bottomをbodyに指定。mainのコンテンツの高さが大きい場合は、footerが前面にかぶります。
本題：flexboxを用いた固定方法
上記2つの方法よりもいたってシンプルな方法になります。
application.html.erb
<body>
<%= render 'layouts/header' %>
<main>
<%= yield %>
</main>
<%= render 'layouts/footer' %>
</body>
application.css
body{
display:flex;
flex-direction:column;
min-height:100vh;
}
main{
margin-bottom:auto;
}
①body内の全体の親要素にdisplay:flex;を指定する。
②ヘッダーからフッターを縦並びにするため、body内の全体の親要素にflex-direction:column;を指定する。
③webページに表示される部分に対して、body要素の高さの割合が100パーセントになるように、min-height:100vh;を全体の親要素に指定。
④最後にmainにmargin-bottom:auto;を指定して、mainの下にmarginをつけてfooterを一番下に表示。
また④に対しては別方法もあり、
・footerにmargin-top:auto;で、footerの上にmarginをつけてfooterを一番下に表示。
・mainにflex:1;を指定して、ヘッダーからmainがflexboxによる効果で縦並びになり、その下にfooterを表示。
最後に
footer固定問題には誰でも直面すると思いますので、参考にしていただけますと幸いです。
他に面白い方法がある方はご報告いただけますと幸いです。
ご覧いただきありがとうございました。
↧