Bootstrap: Wypełnij cały kontener pod navbar minus wysokość paska nawigacyjnego

Question

Aug 13, 2012, 10:06 AM

Bootstrap: Wypełnij cały kontener pod navbar minus wysokość paska nawigacyjnego

Na stronie stylizowanej za pomocą Twitter Bootstrap i za pomocąnavbar Chciałem wypełnić cały kontener pod paskiem nawigacyjnym mapą Google Maps. Aby to osiągnąć, dodałem poniższy kod CSS.

Definiuję dlahtml ibody elementy o rozmiarach do 100%, tak aby były używane do definicji rozmiaru mapy. To rozwiązanie daje jednak jeden problem:

Wysokość mapy jest teraz taka sama, jak wysokość całej strony, co powoduje, że pasek przewijania można przewijać dla 40-bitowego paska nawigacyjnego. Jak mogę ustawić rozmiar mapy na100% - 40px na pasku nawigacyjnym?

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

Dla kompletności 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>