Twitter Bootstrap: div no container com 100% de altura
Usando o bootstrap do twitter (2), eu tenho uma página simples com uma barra de navegação, e dentro docontainer Eu quero adicionar um div com 100% de altura (na parte inferior da tela). Meu css-fu está enferrujado e não consigo resolver isso.
HTML simples:
<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 atual:
#map {
width: 100%;
height: 100%;
min-height: 100%;
}
html, body {
height: 100%;
}
.fill {
min-height: 100%;
}
Eu adicionei altura à classe de preenchimento, como sugerido abaixo. Mas, o problema é que eu adiciono um top de preenchimento ao corpo para dar conta da barra de navegação fixa no topo. Isso afeta a altura de 100% do div do "mapa" e significa que uma barra de rolagem é adicionada - como visto aqui:http://jsfiddle.net/S3Gvf/2/ Alguém pode me dizer como consertar?