JavaScript：レイヤーを画面サイズにフィットさせる

例えば下記関数「onloadFunction」の場合、「fitLayer」というIDを持つレイヤーをウィンドウと同サイズにさせます。

function onloadFunction() {
    if(document.getElementById("fitLayer") != null) {
        var w = document.documentElement.clientWidth;
        var h = document.documentElement.clientHeight;
        document.getElementById("fitLayer").style.width = w + "px";
        document.getElementById("fitLayer").style.height = h + "px";
    }
}

上記ではウィンドウサイズぴったりになりますが、特定サイズにフィットさせる場合は3、4行目で計算をするだけで済みます。

HTML側では下記のようにonloadで呼び出します。

<body onload="onloadFunction()">

つくってみた！

関連記事