footerの位置をページの最下部に固定する【学習メモ】

自分専用の勉強メモです。
編集中

##内容
HTML、CSSでページを作成する際、メインのコンテンツが少ない場合footer部分が上の方にきてしまう。それを防ぐためにjs(今回はjQuery)でfooterを固定させてみる。

window.innerHeightで画面全体の高さを取得し、$ftr.offset().topはfooterまでの高さ、$ftr.outerHeight()でfooter自身の高さを取得する。
もし、$ftr.offset().topと*$ftr.outerHeight()*の合計よりもwindow.innerHeight(画面全体の高さ)の方が大きい場合は、styleでwindow.innerHeightから$ftr.outerHeightを引いた高さ分を付け加えることによりfooterが下に固定される。
##コード

footer.js

$(function(){
     var $ftr = $('#footer');
     if( window.innerHeight > $ftr.offset().top + $ftr.outerHeight() ){
          $ftr.attr({'style': 'position:fixed; top:' + (window.innerHeight - $ftr.outerHeight()) + 'px;' });
     }

随時更新