Bootstrap: заполнить весь контейнер под navbar минус высота navbar
На странице, созданной с помощью Twitter Bootstrap и использующейnavbar Я хотел заполнить весь контейнер под панелью навигации картой 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>