Usando o twitter bootstrap (2), tenho uma página simples com uma barra de navegação e, no interior container
, quero adicionar uma 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%;
}
- EDIT *
Adicionei altura à classe de preenchimento, conforme sugerido abaixo. Mas, o problema é que eu adiciono uma parte superior de preenchimento ao corpo para explicar a barra de navegação fixa na parte superior. Isso afeta a altura de 100% da div "map" e significa que uma barra de rolagem é adicionada - como pode ser visto aqui: http://jsfiddle.net/S3Gvf/2/ Alguém pode me dizer como consertar?