More than 3 years have passed since last update.

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

Posted at 2020-10-04

#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; }

<p>で解決しました。</p>

<p>親要素のpadding-bottomをfooterの高さよりも高くしてbodyとfooterを被らせない。そして、box-sizingにより親要素であるbodyに他の要素を追加しても親要素の高さが崩れないようにしている。</p>

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up