html - Bootstrap: show map that fits the window height below nav header -
in bootstrap 3 have following elements starting top:
- the navbar header
- div contains google map
- row contains widgets.
it's possible show google maps fits screen height , below maps have row contains other elements?
if have fixed header , footer , know height in advance wrap map fixed element , set top
, bottom
properties accordingly.
function initialize() { var mapcanvas = document.getelementbyid('map-canvas'); var mapoptions = { center: new google.maps.latlng(44.5403, -78.5463), zoom: 8, maptypeid: google.maps.maptypeid.roadmap } var map = new google.maps.map(mapcanvas, mapoptions); } google.maps.event.adddomlistener(window, 'load', initialize);
#map-container { position: fixed; top: 50px; left: 0; bottom: 50px; right: 0; } #map-canvas { width: 100%; height: 100%; }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://maps.googleapis.com/maps/api/js"></script> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">header</a> </div> </div> </nav> <div id="map-container"> <div id="map-canvas"></div> </div> <footer class="navbar navbar-default navbar-fixed-bottom"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">footer</a> </div> </div> </footer>
Comments
Post a Comment