Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8674

【HTML/CSS】フッターの固定方法

$
0
0

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

 

Viewing all articles
Browse latest Browse all 8674

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>