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に他の要素を追加しても親要素の高さが崩れないようにしている。