Bootstrap: Remplissez le conteneur entier sous la barre de navigation moins la hauteur de la barre de navigation

Sur une page de style avec Twitter Bootstrap et à l'aide de la navbar je voulais remplir le container entier au-dessous de la barre de navigation avec une carte Google Maps. Pour la réaliser, j'ai ajouté du CSS ci-dessous.

Je définir pour la html et body éléments la taille à 100%, de sorte que ce est utilisé pour la carte de la taille de la définition. Cette solution, cependant, les rendements à un problème:

La carte de la hauteur est maintenant le même que l'ensemble de la hauteur de la page, ce qui entraîne une barre de défilement qui je peux faire défiler pour la 40px la barre de navigation ajoute. Comment puis-je définir la taille de la carte pour 100% - 40px de la barre de navigation?

#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;
}

Pour l'intégralité du code 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>

OriginalL'auteur Mahoni | 2012-08-13