KH-WEBLOG TOP > WEBメモ > JavaScript > ウィンドウサイズに合わせて高さ(height)を合わせる:javascript

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

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

例えば

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

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

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

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){~}の部分はサイドバーの高さなどを指定するか必要なければ削除でOK
このjavascriptをwindowSize.js等のファイル名で保存し、head部分に

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

のようにしてあげればOK

TAGS

.htaccess ActionScript All in one seo pack Contact Form 7 CSS CSS3 EC-CUBE Flash HTML5 JavaScript jQuery LightBox PHP SEO WordPress アイキャッチ画像 アクセス解析 カテゴリー カラーミーショップ カート コメント ショートコード ソースコード タグ テンプレートタグ ドロップダウンメニュー パンくずリスト パーマリンク ビジュアルエディタ フォーム フルスクリーン プラグイン ページテンプレート ページナビ ページ分割 マウスイベント リダイレクト リンク レンタルサーバー ロールオーバー 携帯サイト 条件分岐 正規表現 角丸 関連記事