JavaScriptを使ってブラウザサイズに合わせて任意のブロック要素を可変

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

これを実現するためには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;」として調整すればよいです。