WEB部ログ

WEB部メンバーの勉強用ブログです。

WEB部メンバーの勉強用ブログです。

サイトのコンテンツに被らずフッターを下に固定するCSS

2年の森本です。

以前私が小夏先輩に教えていただいて、皆さんにも、と伝言を頼まれていた、サイトのコンテンツに被らずフッターを下に固定するCSSをお伝えします。

ブログがなかなか上手く書けず伝えるのが遅くなってしまい大変申し訳ないです。

 

皆さんはサイトのコンテンツが少なくてフッターの下に余白が開いてしまうという経験はあるでしょうか。仮にもし、フッターの下に余白があるページを行き来すると、フッターがガタガタ動くように切り替わり表示されてしまうので、少しみっともないと思います。

そういった事態にならないためのCSSが下記になります。また、この方法ではbodyの中身を全て囲むdivをつくって使います。今回はそのつくったdivを#page、フッターを#footerとして表しています。

 

まず、実際のコードになります。

#page {
    position: relative;
    padding-bottom: 80px; /* フッターの高さ+フッターの上の余白の高さ */
    box-sizing: border-box;
    min-height: 100vh;
}
#footer{
    position: absolute;
    bottom: 0;
    left: 0;
    height: 50px; /* フッターの高さ */
}
 
このコードでは、#pagemin-heightをつけることで「コンテンツの高さが小さかったとしても#pageは最低ウィンドウの高さ分(100vh)高さをもつ」という設定をしています。そして、#pageを親、#footerを子としてpositionを使い、#footer#pageの下に固定にしています。
 
上記の設定でフッターは固定できますが、これだけではウィンドウを縮小した時にも
ウィンドウ下にフッターが固定されるため、コンテンツに#footerが被って表示されてしまいます。そこで#footerheightをpxで指定し、#pagepadding-bottomを使って、#footerheightと、#footerとコンテンツの間に空けたい余白の高さを足した領域をつくります。これで#footer#pagepadding-bottom部分の上に表示されるので、ウィンドウを縮小した場合もコンテンツに被らずスクロールで見ることができるようになります。
 
コード自体は簡潔なのですが、文章だと分かりにくいかもしれないので、ぜひ一度実際に試してみてください。