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

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

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

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);
    });
});