93
Usando Twitter bootstrap (2), tengo una página simple con una barra de navegación, y dentro del container quiero agregar un div con 100% de altura (al fondo del pantalla). Mi css-fu está oxidado, y no puedo resolverlo.Twitter Bootstrap: div en contenedor con 100% de altura
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%;
}
- EDITAR *
He añadido la altura a la clase de relleno como se sugiere a continuación. Pero, el problema es que agrego un relleno al cuerpo para dar cuenta de la barra de navegación fija en la parte superior. Esto afecta al 100% de altura del div "mapa" y significa que se agrega una barra de desplazamiento, como se ve aquí: http://jsfiddle.net/S3Gvf/2/ ¿Alguien me puede decir cómo solucionarlo?
¿Entonces solo quieres extender ese div en todas las direcciones? –
Sí, quiero que complete el espacio que queda después del nav div –