Menu
On a page styled with Twitter Bootstrap and using the navbar I wanted to fill the whole container below the navigation bar with a Google Maps map. To accomplish that I have added the CSS following below.
I define for the html and body elements the sizes to 100% so that this is used for the map's size definition. This solution, however, yields one problem:
The map's height is now the same as the whole page height, which results in a scroll bar which I can scroll for the 40px the navigation bar adds. How can I set the size of the map to 100% - 40px of the navigation bar?
#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;
}
For completeness the 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>
523
You could solve the problem with absolute positioning.
.fill {
top: 40px;
left: 0;
right: 0;
bottom: 0;
position: absolute;
width: auto;
height: auto;
}
Demo (jsfiddle)
You could also make the navbar .navbar-fixed-top and somehow add a padding or margin inside the #map element.
163
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
