Railsでフッターを固定する
footerを固定する
application.html
<body>
...
<footer>フッター</footer>
</body>
application.css
body{
min-height:100vh ;
position: relative;
}
footer{
width: 80%;
height:50px;
position: absolute;/*←親要素に対して、絶対位置を決める*/
bottom: 0; /*ページの下端からの距離が0の位置*/
}
ここまでで、footerをページの下に固定することはできた。しかし、、、
スクロールダウンするとbodyの中身がfooterと被る
このエラーに対しては
application.css
body{
min-height:100vh ;
position: relative;
padding-bottom:50px;
box-sizing:border-box;
}
で解決しました。
親要素のpadding-bottomをfooterの高さよりも高くしてbodyとfooterを被らせない。そして、box-sizingにより親要素であるbodyに他の要素を追加しても親要素の高さが崩れないようにしている。