Webサイトのフッター下部の空白をなくすJavaScript関数&CSS(make footer stick at bottom)

下記の関数により、フッター下部の空白を埋めることができる。
どのページサイズ(縦)にも適応できる。

# JavaScript
function makeFooterSticky(){
    var footer_pos = $('.footer').offset().top;
    var footer_height = $('.footer').outerHeight();
    var body_height = $(document.body).outerHeight();

    if (footer_pos + footer_height < body_height){
        $('.footer').addClass('fixed-bottom');
    }
    else{
        $('.footer').removeClass('fixed-bottom');
    }
}

// CSS
// bootstrapを使用している場合は、それに付属している。
.fixed-bottom {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1030;
}

// .footerクラスはJqueryで識別するためだけに使用しているので、
// cssファイル内に記述する必要ない。

<!-- HTML -->
<footer class="footer">
  Fotterここ
</footer>

使い方

1. Footerのエレメントにfooterクラスを追加する。
2. Bootstrapを使わない場合は、上記のCSSをcssファイルに追加する。
3. 以下のJavaScriptをonloadなど必要なときに実行する。

makeFooterSticky();