ブートストラップ：navbarマイナスナビバーの下のコンテナ全体を塗りつぶし

Twitter Bootstrapスタイルで、navbarを使用しているページでは、Googleマップのナビゲーションバーの下にあるコンテナ全体を埋めたいと思っていました。これを達成するために、以下のCSSを追加しました。ブートストラップ：navbarマイナスナビバーの下のコンテナ全体を塗りつぶし

htmlとbody要素のサイズを100％に定義し、マップのサイズ定義に使用するように定義します。しかし、この解決策では1つの問題が発生します。

マップの高さがページ全体の高さと同じになりました。その結果、スクロールバーが表示され、ナビゲーションバーに40pxスクロールできます。ナビゲーションバーの地図のサイズを100% - 40pxに設定するにはどうすればよいですか？完全のために

#map { 
     height: 100%; 
     width: 100%; 
} 

#map img { 
     max-width: none; 
} 

html, body { 
     height: 100%; 
     width: 100%; 
} 

.fill { 
     height: 100%; 
     width: 100%; 
} 

.navbar { 
     margin-bottom: 0; 
}

HTML：

<!DOCTYPE html> 
<html lang="en"> 
     <head> 
       <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 
       <!-- Stylesheets --> 
       <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> 
       <link rel="stylesheet" type="text/css" href="css/core.css"> 
     </head> 
     <body> 
       <div class="navbar"> 
         <div class="navbar-inner"> 
         </div> 
       </div> 
       <div class="container fill"> 
         <div id="map"> 
         </div> 
       </div> 
     </body> 
</html>

出典

2012-08-13 Mahoni

あなたは絶対位置の問題を解決することができます。

.fill { 
    top: 40px; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    position: absolute; 
    width: auto; 
    height: auto; 
}

Demo (jsfiddle)

また、ナビゲーションバー.navbar-fixed-topを作成して、何とか#map要素の内部パディングやマージンを追加することができます。

出典

2012-08-13 08:47:43 Sherbrow

この方法では、ブートストラップが絶対配置されたマップdiv上でメニューを切り替えるので、アプリはそれ以上応答しません。 –

@JürgenZornig応答性は絶対的な状態ではありません。これがより小さい/より広いスクリーン上のあなたのレイアウトでうまくいくならば、それは反応的です。そうでない場合は、いくつかのメディアクエリを投げて、それをあなたのニーズに合わせてください。 – Sherbrow

はい、私はあなたに同意しますが、Div絶対トップ40pxを配置すると、navbarメニューを開くと、小さい画面での標準ブートストラップメニューの動作がdivと重複します。申し訳ありませんが、私はちょうど私のレイアウトのニーズに合ったこの答えを知りたいと思っていました。ちょうど別の方法で解決しました（位置：staticで） –

ブートストラップ：navbarマイナスナビバーの下のコンテナ全体を塗りつぶし

答えて

関連する問題