概要

Webページの画面の高さいっぱいに対して、中身の要素が足りていない場合にはフッターの下に余白ができてしまいます。
この余白を無くしてフッターを最下部にする方法に意外と手こずったことはないでしょうか。
ということで、CSSがどのように反映されるかをしっかり理解してフッター下部の余白を無くす方法を書いていきたいと思います。

フッター下部の余白をなくす方法

早速ですが、解決方法の１つの例が以下になります。

<html>
 <body>
  <div class="wrapper">
   <header>ヘッダー</header>
    <div class="inner">中身</div>
   <footer>フッター</footer>
  </div>
 </body>
</html>

html,body{
     height:100%;
}

.wrapper{
     width: 100%;
     position: relative;
     min-height: 100%;
}

.inner{
     padding-bottom:200px; /*フッターの高さと同じにする*/
}

footer{
     height:200px;
     position:absolute;
     bottom:0;
}

まず、height:100%;の％設定は設定したクラスの親要素に対して適用するものになります。
そのため、htmlから設定していかなければなりません。
htmlをheight:100%;にしているので、bodyをheight:100%;にすればhtmlとbodyの高さが100%になります。

そして、コンテンツを囲んでいるwrapperにmin-heightを設定してあるのが肝です。
私はここをheight:100%;にしていたため、上手く反映されずに時間がかかってしまいました。

もしwrapperをheightで設定した場合は、中身の要素分までしか高さが伸びないので、中身の要素の高さが画面いっぱい分までなければ、footerを最下部にすることができません。
height:100%;にしたとしても中身がなければ、高さは０になります。

しかし、min-heightの場合は最小の高さを指定するので、中身の要素がなくても最小１００％の高さが反映されます。
例えば100pxにした場合は要素の中身が高さ50pxでも100pxまで伸びて、要素の中身が高さ150pxであれば、150pxまで伸びます。

そして、wrapperとfooterにpositionを設定し、footerをbottom:0;にすることで、wrapperの中に含まれているfooterはwrapperの最下部に位置します。
このままだとwrapperの中にfooterが被っているのでpadding-bottomをfooterの高さ分設定して、wrapperからfooterを押し出して最下部に配置します。

以上でフッターの下部に余白は無くなると思います。

こういった簡単に思えることで、時間が取られてイライラしてしまっている方の助けになることを祈ります。

【HTML&CSS】フッター下部の余白を無くす方法

概要

フッター下部の余白をなくす方法