footer（フッター）部分を、超絶！鼻血吹き出るほど簡単に真下に固定したい件

まあ、アレですわ！ｗ

ページ作っていると、フッター部分を真下に確実に表示させたい状況に確実に遭遇するわけですが…。

これまで色々とCSSを試行錯誤しながら対応していたわけですが、今回劇的に簡単に実装できる方法を発見したのでシェアいたします。

本当、とても簡単です！

まずは以下のコードを外部ファイルまたは直接ページに記述します。
まあ、複数ページってある物なので外部ファイルに記述し、読み込むのが一般的ですわな！ｗ

で、コードはこちらでやんす。

/*--------------------------------------------------------------------------*
 *  
 *  footerFixed.js
 *  
 *  MIT-style license. 
 *  
 *  2007 Kazuma Nishihata [to-R]
 *  http://blog.webcreativepark.net
 *  
 *--------------------------------------------------------------------------*/

new function(){
	
	var footerId = "footer";
	//メイン
	function footerFixed(){
		//ドキュメントの高さ
		var dh = document.getElementsByTagName("body")[0].clientHeight;
		//フッターのtopからの位置
		document.getElementById(footerId).style.top = "0px";
		var ft = document.getElementById(footerId).offsetTop;
		//フッターの高さ
		var fh = document.getElementById(footerId).offsetHeight;
		//ウィンドウの高さ
		if (window.innerHeight){
			var wh = window.innerHeight;
		}else if(document.documentElement && document.documentElement.clientHeight != 0){
			var wh = document.documentElement.clientHeight;
		}
		if(ft+fh<wh){
			document.getElementById(footerId).style.position = "relative";
			document.getElementById(footerId).style.top = (wh-fh-ft-1)+"px";
		}
	}
	
	//文字サイズ
	function checkFontSize(func){
	
		//判定要素の追加	
		var e = document.createElement("div");
		var s = document.createTextNode("S");
		e.appendChild(s);
		e.style.visibility="hidden"
		e.style.position="absolute"
		e.style.top="0"
		document.body.appendChild(e);
		var defHeight = e.offsetHeight;
		
		//判定関数
		function checkBoxSize(){
			if(defHeight != e.offsetHeight){
				func();
				defHeight= e.offsetHeight;
			}
		}
		setInterval(checkBoxSize,1000)
	}
	
	//イベントリスナー
	function addEvent(elm,listener,fn){
		try{
			elm.addEventListener(listener,fn,false);
		}catch(e){
			elm.attachEvent("on"+listener,fn);
		}
	}

	addEvent(window,"load",footerFixed);
	addEvent(window,"load",function(){
		checkFontSize(footerFixed);
	});
	addEvent(window,"resize",footerFixed);
	
}

↑この記述を外部ファイルに保存して読み込みます。
footerFixed.jsとして保存！

ここからがすごいんですね！ｗ

あとは、真下に表示させたい要素に対してid「footer」と付けます。

これだけで、フッター部分が下に固定されます。

何と簡単な！！

このJSを作った勇者をご紹介いたします！

素晴らしいですね、勇者さん感謝です！


http://blog.webcreativepark.net/2007/11/16-012253.html

3ステップでしっかり学ぶ JavaScript入門 (今すぐ使えるかんたんプラス) 著：大津 真 参考価格：\2,570 価格：\34 OFF : \2,536 (99%)