Toggle

ウェブ

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

Medium 4352318554

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

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

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

対処方法

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

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

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

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

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

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

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

LEAVE A REPLY

*
*
* (公開されません)

Return Top