Twitter Bootstrap: div en contenedor con 100% de altura
Al usar Twitter Bootstrap (2), tengo una página simple con una barra de navegación, y dentro de lacontainer Quiero agregar un div con 100% de altura (en la parte inferior de la pantalla). Mi css-fu está oxidado, y no puedo resolver esto.
HTML simple:
<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 actual:
#map {
width: 100%;
height: 100%;
min-height: 100%;
}
html, body {
height: 100%;
}
.fill {
min-height: 100%;
}
He añadido altura a la clase de relleno como se sugiere a continuación. Pero, el problema es que agrego una parte superior de relleno al cuerpo para dar cuenta de la barra de navegación fija en la parte superior. Esto afecta a la altura del 100% del div "mapa" y significa que se agrega una barra de desplazamiento, como se ve aquí:http://jsfiddle.net/S3Gvf/2/ ¿Alguien puede decirme cómo arreglarlo?