Twitter Bootstrap: In Container mit 100% Höhe einteilen

Question

Jul 26, 2012, 10:54 PM

Twitter Bootstrap: In Container mit 100% Höhe einteilen

Unter Verwendung von Twitter Bootstrap (2) habe ich eine einfache Seite mit einer Navigationsleiste und innerhalb dercontainer Ich möchte ein Div mit 100% Höhe hinzufügen (am unteren Rand des Bildschirms). Mein CSS-Fu ist rostig, und ich kann das nicht herausfinden.

Einfaches 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>

Aktuelles CSS:

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

html, body {
    height: 100%;
}

.fill { 
    min-height: 100%;
}

BEARBEITEN *

Ich habe der Füllklasse die unten vorgeschlagene Höhe hinzugefügt. Das Problem ist jedoch, dass ich dem Körper ein Polster-Oberteil hinzufüge, um die feste Navigationsleiste oben zu berücksichtigen. Dies wirkt sich auf die 100% -Höhe des "Karten" -Div aus und bedeutet, dass eine Bildlaufleiste hinzugefügt wird - wie hier zu sehen:http://jsfiddle.net/S3Gvf/2/ Kann mir jemand sagen, wie man das behebt?