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の位置にいるということで、ブラウザの下の位置にいるということになります。