まず下記関数を作ります。
function fitWindow($target) { var w = document.documentElement.clientWidth; var h = document.documentElement.clientHeight; document.getElementById($target).style.width = w + "px"; document.getElementById($target).style.height = h + "px"; }
ブラウザウィンドウ内の幅と高さを、ターゲットのレイヤーに埋め込む関数です。
ターゲットレイヤーはウィンドウ幅ぴったりの大きさになります。
次に下記の記述を加えます。
window.onload = function(){ fitWindow("targetLayer"); } window.onresize = function() { fitWindow("targetLayer"); }
window.onload でページの読み込み時に、また window.onresize でブラウザ幅に変化があった時に、fitWindowを呼び出して「targetLayer」のサイズを変化させています。
jQueryが使える環境だと onLoad や onResize 辺りが忘れられがちですが、応用できると便利です。