Bootstrap: Füllen Sie den gesamten Container unter der Navigationsleiste minus der Höhe der Navigationsleiste
Auf einer Seite, die mit Twitter Bootstrap gestaltet wurde und dienavbar Ich wollte den gesamten Container unterhalb der Navigationsleiste mit einer Google Maps-Karte füllen. Um dies zu erreichen, habe ich das folgende CSS hinzugefügt.
Ich definiere für diehtml undbody Elemente die Größen auf 100%, so dass dies für die Größendefinition der Karte verwendet wird. Diese Lösung ergibt jedoch ein Problem:
Die Höhe der Karte entspricht nun der gesamten Seitenhöhe. Dies führt zu einer Bildlaufleiste, die ich für die 40 Pixel, die die Navigationsleiste hinzufügt, verschieben kann. Wie kann ich die Größe der Karte einstellen?100% - 40px der Navigationsleiste?
#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;
}
Der Vollständigkeit halber das 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>