ウィンドウサイズに合わせて高さ(height)を合わせる：javascript

2012-10-20 JavaScript

サイドバーに背景を指定している場合等に、javascriptでサイドバー等の高さがウィンドウサイズに足りてなくてもDIV要素をウィンドウサイズの高さに合わせる方法をメモ。

例えば

<div id="container">
<!--サイドバー-->
<div id="sidebar">
</div>
<!--メインコンテンツ-->
<div id="content">
</div>
</div>

のような構造の場合でサイドバーかコンテンツの中身が長い場合は
cssで#containerにサイドバー用の背景画像をして、heightをauto等にすればＯＫですが

例えば中身が短くてウィンドウサイズによっては高さが足らない場合などは

function changeHeight(id){

//ウィンドウの高さ900px以上の場合
if(window.innerHeight > 900){
	
	var obj=document.all && document.all(id)
	
	|| document.getElementById && document.getElementById(id);
	
	if(obj){
	
	clientSize=getWindowClientSize();
	
	obj.style.height=""+(clientSize.height)+"px";
	//スクロールが出てしまう場合に使用。　offsetTopの値を調整する
	//obj.style.height=""+(clientSize.height - obj.offsetTop - 20)+"px";
	
	}
}

}

function getWindowClientSize(){

	var result={"width":0,"height":0};
	
	if(window.self&&self.innerWidth){
	
	result.width=self.innerWidth;
	
	result.height=self.innerHeight;
	
	}else if(document.documentElement && document.documentElement.clientHeight){
	
	result.width=document.documentElement.clientWidth;
	
	result.height=document.documentElement.clientHeight;
	
	}else{
	
	result.width=document.body.clientWidth;
	
	result.height=document.body.clientHeight;
	
	}
return result;

}

※if(window.innerHeight > 900){～}の部分はサイドバーの高さなどを指定するか必要なければ削除でＯＫ
このjavascriptをwindowSize.js等のファイル名で保存し、head部分に

<!--外部windowSize.jsの読み込み-->
<script src="js/windowSize.js" type="text/javascript"></script>
</head>
<!--読み込み時に#containerの高さをウィンドウサイズに合わせる-->
<body onload="changeHeight('container');" onresize="changeHeight('container');">

のようにしてあげればＯＫ