【jQuery】短いページだけフッターを最下部に固定する

ページのコンテンツが少ないなど、フッターを含めたページの縦幅がブラウザの縦幅より短い場合があると思います。
そのようなページでフッターをそのままコンテンツにつなげると、フッターの下にさらに余白ができてしまい、なんだかカッコ悪いですよね。
かといって、position: fixed で常にフッターを固定すると、今度は長いページでもフッターが常に残ってしまいます。

そこで、ページの縦幅がブラウザの縦幅より短い場合だけ
position: fixed を指定してみます。

まずはページサイズとブラウザサイズを取得

var page_size = {
  w : $(window).width()
 ,h : $(window).height()
};
var browser_size = {
  w: document.body.clientWidth
 ,h: document.body.clientHeight
};

var page_size = {

w : $(window).width()

,h : $(window).height()

};

var browser_size = {

w: document.body.clientWidth

,h: document.body.clientHeight

};

両者を比較して、ページサイズが短い場合にpositionをfixedにします。

if(page_size.h > browser_size.h) {
  $('フッターのセレクタ').css('position', 'fixed');
  $('フッターのセレクタ').css('bottom', '0px');
  $('フッターのセレクタ').css('width', '100%'); /* 必要なら */
}
else {
  $('フッターのセレクタ').css('position', 'static');
  $('フッターのセレクタ').css('bottom', '');
  $('フッターのセレクタ').css('width', ''); /* 必要なら */
}

if(page_size.h > browser_size.h) {

$('フッターのセレクタ').css('position', 'fixed');

$('フッターのセレクタ').css('bottom', '0px');

$('フッターのセレクタ').css('width', '100%'); /* 必要なら */

}

else {

$('フッターのセレクタ').css('position', 'static');

$('フッターのセレクタ').css('bottom', '');

$('フッターのセレクタ').css('width', ''); /* 必要なら */

}

注意すべき点して、
上記の処理は基本的にページロードの最後に呼べばよいのですが、
動的にコンテンツが増えたり減ったりするページの場合は
その都度、上記の処理を呼ぶ必要があります。

関連記事