画面の縦の高さが足りない時にフッターの高さを高くして調整する

画面の縦の高さが足りない時
フッターを画面の最下部にくっつけるというアプローチもいい。
だが今日は背景色をいろいろ追加するデザインをいただいていて、
bodyとフッターの背景色を別色に設定していた。
なので、フッターの高さを画面ピッタリにして調整するというアプローチをしてみた。

windowsの
IE8 IE11 chrome33 safari5
で検証済み

$(function(){
	footerHeight = function (){
		var footerWrap = $('div#footerWrap');
		//フッターの高さをリセット
		footerWrap.css({height:'auto'});
		//フッターのトップからの距離
		var ft = footerWrap.offset();
		//フッターの高さ
		var fh = footerWrap.height();
		//ウィンドウの高さ（スクロールバー領域を含む）
		//var wh = window.innerHeight;
		//ウィンドウの高さ（スクロールバー領域を含まない）		
		var dh = document.documentElement.clientHeight;
		if(ft.top+fh<dh){
			/* ウインドウの高さから、フッターのトップからの距離分と、フッターのボーダーの分引いた値がフッターの高さです */
			var fh = dh - ft.top - 2 + "px";
			footerWrap.css({height:fh});
		}
	};
	
	window.onload = function(){
		footerHeight();
	}
	
	$(window).resize(function() {
		footerHeight();
	});
});