HTML、CSS、JavaScriptなどWebに悩む人のネタ帳です。

ある任意のブロック要素の縦幅、横幅をブラウザのサイズに合わせて可変にしたい場合があります。

これを実現するためにはJavaScriptで、ブラウザサイズ変更を感知、ブラウザサイズを取得、ブラウザサイズの比率でブロック要素のサイズを変更、という流れの処理を実現しなければなりません。

例えば、縦幅を可変対応としたい場合に、まず、ブラウザサイズの検知にはイベントハンドラ「window.onresize」を利用します。
ブラウザサイズの取得には「document.documentElement.clientHeight」を用います。直感的に「window.innerHeight」を使おうと思いますが、これはIEでの動作がおかしいので標準的には使えません。

サイズ変更にはスタイル要素を追加しますが、ここでは「element.setAttribute(“style”, “height : ” + x + “px;”);」とします。これも直感的には「element.style.height」と思うかもしれませんが、IEではちゃんと動いてくれません。

以下、サンプルです。
ブラウザサイズに合わせてブロック要素「#sample」の縦幅が連動します。

<div id="sample">サンプル</div>
function changeDivArea(){
	var x = document.documentElement.clientHeight;
	document.getElementById("sample").element.setAttribute("style", "height : " + x + "px;");
}
window.onresize = function(){
	changeDivArea();
}

実際、レイアウトによっては取得したい値と設定したい値にズレが生じる場合があります。
ズレは定数なので、処理の間に「x = x + zure;」として調整すればよいです。

このエントリーをはてなブックマークに追加

Reference

Comment

Comment Form

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Monthly Archives

Search