BinaryDevelop
  1. ホーム
  2. css

[解決済み] Twitter Bootstrap: コンテナ内のdivを100%の高さにする

2022-05-04 12:59:16

質問

twitter bootstrap (2)を使って、ナビバー付きのシンプルなページがあり、その中の container 高さ100%のdivを追加したい（画面の下まで）。私のCSSの腕は錆びついていて、これを解決することができません。

簡単なHTMLです。 

<body>
  <div class="navbar navbar-fixed-top">
   <!-- Rest of nav bar chopped from here -->
  </div>
  <div class="container fill">
    <div id="map"></div> <!-- This one wants to be 100% height -->
  </div>
</body>

現在のCSSです。 

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

html, body {
    height: 100%;
}

.fill { 
    min-height: 100%;
}
  • 編集

下記の提案のように、fillクラスにheightを追加しました。しかし、問題は、上部にある固定ナビバーを考慮し、bodyにpadding-topを追加していることです。これは、"map" div の 100% の高さに影響し、スクロールバーが追加されることを意味します - ここで見られるように。 http://jsfiddle.net/S3Gvf/2/ どなたか修正方法を教えてください。

解決方法を教えてください。

クラスを設定する .fill から height: 100% 

.fill { 
    min-height: 100%;
    height: 100%;
}

JSFiddle

(の背景を赤にしました。 #map 高さ100%で表示されます。）

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します