Вопросы Теги

Bootstrap :Заполнить весь контейнер под навигационной панелью минус высота навигационной панели

На странице, созданной с помощью Twitter Bootstrap и использующей панель навигации , я хотел заполнить весь контейнер под панелью навигации картой Google Maps. Для этого я добавил CSS ниже.

Я определяю для элементов htmlи bodyразмеры до 100%, чтобы они использовались для определения размера карты. Это решение, однако, приводит к одной проблеме:

Высота карты теперь такая же, как и высота всей страницы, что приводит к полосе прокрутки, которую я могу прокручивать на 40 пикселей, которые добавляет панель навигации. Как я могу установить размер карты на 100% - 40pxпанели навигации?

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

Для полноты 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>
10
задан Mahoni 13 August 2012 в 08:06
поделиться