Bootstrap: llena todo el contenedor debajo de la barra de navegación menos la altura de la barra de navegación

En una página diseñada con Twitter Bootstrap y usando la barra de navegación , quería llenar todo el contenedor debajo de la barra de navegación con un mapa de Google Maps. Para lograrlo, he agregado el siguiente CSS.

Defino para los elementos html y body los tamaños al 100% para que esto se use para la definición del tamaño del mapa. Esta solución, sin embargo, produce un problema:

La altura del mapa ahora es la misma que la altura de la página completa, lo que da como resultado una barra de desplazamiento que puedo desplazar para los 40px que agrega la barra de navegación. ¿Cómo puedo establecer el tamaño del mapa en 100% - 40px de la barra de navegación?

 #map { height: 100%; width: 100%; } #map img { max-width: none; } html, body { height: 100%; width: 100%; } .fill { height: 100%; width: 100%; } .navbar { margin-bottom: 0; } 

Para completar el HTML:

           

Podrías resolver el problema con un posicionamiento absoluto.

 .fill { top: 40px; left: 0; right: 0; bottom: 0; position: absolute; width: auto; height: auto; } 

Demo (jsfiddle)

También puede hacer que navbar .navbar-fixed-top y de alguna manera agregue un relleno o margen dentro del elemento #map .