150

twitter ブートストラップ (2) を使用して、ナビゲーション バーのあるシンプルなページを作成し、その中にcontainer(画面の下部に) 100% の高さの div を追加したいと考えています。私のcss-fuはさびていて、これを解決できません。

シンプルな 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%;
}
  • 編集 *

以下に示すように、塗りつぶしクラスに高さを追加しました。しかし、問題は、上部の固定ナビゲーションバーを考慮して、ボディにパディングトップを追加することです. これは、「マップ」div の 100% の高さに影響し、スクロールバーが追加されることを意味します - ここに見られるように: http://jsfiddle.net/S3Gvf/2/

4

4 に答える 4

136

クラス.fillをheight: 100%

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

JSFiddle

#map(高さ 100% を占めることがわかるように背景を赤にしています)

于 2012-07-26T21:07:16.557 に答える