[jQuery]Bootstrapとかを使ってて要素サイズの%指定が崩れた時の対処法

2013年11月12日2021年9月22日

こんばんは、ボーノです。

Bootstrap等のCSSライブラリを使ってると、要素サイズを100%指定とかしていても崩れる場合がある。

特に、Google Maps等のAPIを併用していると特にこういう現象が起きやすいみたい。

対処方法

ここでは、Twitter Bootstrapで画面上部にナビゲーションバーを設置している場合。

普通に作ると、heightに100%を指定してもナビゲーションバーの分だけ下にスライドできてしまう。

そんな時は、下記のように画面を一旦読み込んだあとに、ナビゲーションバーの高さ（ここでは50px）の分だけ引いてやれば良い。

ウィンドウサイズがユーザの手で変更される事も想定して、$(window).resize(function(){})も指定している。

$(function(){

    //navbar-top の分だけbodyをリサイズ
    var wh = $(window).height();
    $("body").css("height", wh - 50);

    $(window).resize(function(){
        var wh = $(window).height();
        $("body").css("height", wh - 50);
        console.log(wh);
    });
});

下記サイトも参考にした。

ウィンドウサイズ変更を検知してサイズによって画像サイズを変更するJavaScriptプログラムメモ｜プログラムメモ

ARKの技術メモ: [JavaScript]画面ロード時にレイアウトがガタッっと一瞬崩れないようにするため

＼電子工作歴9年の私のイチ押し！ELEGOOの電子工作キット／