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