フッターをブラウザ最下部に固定配置する方法

footer_place.js

//画面loadとresize時に実行する関数
$(window).on('load resize', function(){
//コンテンツの最後のdiv要素の座標を取得して、フッターをブラウザ底部に配置
    var offsetVal = $('#end_of_the_page').offset(); //コンテンツの最後に配置した空のdiv要素の上端までのオフセット
    var h_end = $('#end_of_the_page').outerHeight(); //空のdiv要素の高さ(border等付けてないので無くても動作するとは思います)
    var h = window.innerHeight; //ブラウザの表示領域の高さ
    var gap = h - (offsetVal.top + h_end); //ブラウザの高さと空のdivの底部までのオフセットとの差(コンテンツが少なくブラウザの底部に届いていなければ正の値)
    var h_footer = $('#footer').outerHeight(); //フッターの高さ(フッターにid="footer"をつけてください)
    var set_h = gap - h_footer; //空のdivに適用する高さ(height)
    if(gap > h_footer){ 
        //ブラウザの高さとコンテンツの底部までの高さの差分がフッターの高さより大きければ(つまり、ブラウザ底部に隙間が開いてしまう状態であれば)実行
        $('#end_of_the_page').css({
            "height": set_h //空のdivの高さを設定する
        });
    }else{
        //コンテンツがブラウザの高さよりも長くなる場合(つまり、何もしなくても問題ない場合)は特に何もしない
    }
});