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

goto_jp 676views 更新:2014年7月15日

http://hacknote.jp/archives/3860/
こちらの内容で画面ピッタリにレイヤーをフィットさせられますが、ブラウザウィンドウのサイズが変更された場合、このままでは当然はみ出ます。

挙動としてはみ出ても問題ないならば良いですが、ブラウザウィンドウに動的にフィットさせる場合は「onresize」を使います。

function fitWindow() {
    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";
    }
}

コードの処理は前回のものと変えていません。関数名のみ汎用的なものに変えています。

<body onload="fitWindow()" onresize="fitWindow()">

これでページのロード時とウィンドウサイズの変更時にfitWindowが動作します。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません