自舉：顯示適合下面NAV頭中的窗口高度地圖

Question

在自舉3我有以下元件從頂部開始：

• 導航欄頭
• DIV包含一個谷歌地圖
• 一行包含一些小部件。

這有可能表明適合屏幕高度和地圖下方有一個包含其他元素的行谷歌地圖？

Answer 1

如果您有一個固定的頁眉和頁腳並提前知道它們的高度，則可以用固定元素包裹地圖並相應地設置top和bottom屬性。

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>