bodyがwindowより短いときにfooterを下部にposition:fixedで配置する

footer.position.changer.jsの記述内容

jQueryと一緒に以下を読み込みます。

var FOOTER_ELEMENT = $('#js-Footer');
var resizedTimer = false;

//footerのpositionを fixed / static に切り替える関数
var FooterPositionChanger = function(){
  var _windowHeight   = $(window).height();
  var _bodytHeight = $('body').height();
  if(_bodytHeight < _windowHeight){
    //documentが極端に短いのでフッターをposition:fixedにする
    FOOTER_ELEMENT.removeClass('is-static').addClass('is-fixed');
  }else{
    //スクロールが必要な長さなのでフッターは静的に配置
    FOOTER_ELEMENT.removeClass('is-fixed').addClass('is-static');
  }
}

window.onload = function(){
  //footerが他のコンテンツに重ならないように、表示領域を確保
  FOOTER_ELEMENT.css('height',FOOTER_ELEMENT.outerHeight());

  //footerのpositionをfixedとstaticに切り替え
  $(window).on('resize', function() {
    if (resizedTimer !== false) {
      clearTimeout(resizedTimer);
    }
    resizedTimer = setTimeout(function() {
      FooterPositionChanger();
    },200);
  }).resize();
}

css

たぶん以下のような感じ

.footer{
   visibility:hidden;
}
.footer.is-fixed{
  visibility:visible;
  position:fixed;
  bottom:0;
  width:100%;
}
.footer.is-static{
  visibility:visible;
}