19 ホームページ制作基礎講座　CSS編　footerを固定する

Yoshiko先生

HTMLのsection 内に入っている画像周りこみを制御するcss19回目となります。ここでは、ページの一番下に常にfooter が固定されている状態を作っています。

はてな女史

footer って、あのcopy right とかがある下のところですか？

Yoshiko先生

そうです。footer 上の部分の縦の長さがそんなに長くない時　footer が上で終わると格好が悪いので、下に固定しておきたい場合によく使います。

footer を含む　外側のdiv class="content"

.content {
     width: 800px;
     margin: 0 auto;
     border-left: 5px solid #999;
     border-right: 5px solid #999;
     position: relative;
     min-height: 100vh;
     padding-bottom: 100px;
     box-sizing: border-box;
     }

yoshiko

min-height: 100vh;　　というのは、最小の高さが、100vh ディスプレイの高さいっぱいいっぱいという意味です。

一番下のfooter部分に

footer{
     background-image: linear-gradient(
     to bottom,
     #ddd,#fff,#aaa);
     padding:1em 0;
     position: absolute;
     bottom:0;
     width:790px;
 }

yoshiko

position:absolute というのが位置が絶対位置になった。ということで、今までのような相対位置　margin とかで設定していたものから離れて、絶対的にこの位置にいるというポジションです。これがbottom:0 下から0の位置にいるということで、ブラウザの下の位置にいるということになります。

footer固定 を解説した動画