CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Tom
Tom

Reputation: 4097

Bootstrap: show map that fits the window height below nav header

in bootstrap 3 i have the following elements starting from top:

It's possible to show the google maps that fits the screen height and below the maps have the row that contains other elements?

Upvotes: 1

Views: 1074

Answers (1)

just95
just95

Reputation: 1099

If you have a fixed header and footer and know their height in advance you could wrap the map with a fixed element and set the top and 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>

Upvotes: 3

Related Questions