Bootstrap: llenar todo el contenedor bajo la barra de navegación menos la altura de la barra de navegación

Question

Aug 13, 2012, 10:06 AM

Bootstrap: llenar todo el contenedor bajo 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 elbarra 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 añadido el siguiente CSS a continuación.

Yo defino para elhtml ybody elementos de los tamaños al 100% para que esto se utiliza para la definición de tamaño del mapa. Esta solución, sin embargo, produce un problema:

La altura del mapa ahora es la misma que la altura de toda la página, lo que da como resultado una barra de desplazamiento que puedo desplazar hasta los 40px que agrega la barra de navegación. ¿Cómo puedo configurar el tamaño del mapa para100% - 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:

<!DOCTYPE html>
<html lang="en">
        <head>
                <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
                <!-- Stylesheets -->
                <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
                <link rel="stylesheet" type="text/css" href="css/core.css">
        </head>
        <body>
                <div class="navbar">
                        <div class="navbar-inner">
                        </div>
                </div>
                <div class="container fill">
                        <div id="map"> 
                        </div>
                </div>
        </body>
</html>