地圖裏格設置不敏感，當改變大小

我用這個來源爲我的網站：http://tympanus.net/codrops/2013/04/23/fullscreen-layout-with-page-transitions/，
下載鏈接：http://tympanus.net/Development/FullscreenLayoutPageTransitions/FullscreenLayoutPageTransitions.zip
我的工作做好。
在第一部分（關於部分）。我添加此地圖：地圖裏格設置不敏感，當改變大小

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script> 
<script type="text/javascript"> 
    function initialize() { 
     var mapCanvas = document.getElementById('map'); 
     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); 
</script>

我在第一節課「BL-內容」刪除任何東西在股利和它更改爲ID：地圖：

<section> 
       <div class="bl-box"> 
        <h2 class="bl-icon bl-icon-about">About</h2> 
       </div> 
       <div id="map" class="bl-content"> 

       </div> 
       <span class="bl-icon bl-icon-close"></span> 
      </section>

地圖的查看。但它不是全尺寸。我不知道爲什麼。我在這裏犯了什麼錯誤？

來源

2015-11-17 Duy Hưng Androgyne Tenor

這是更多的CSS問題。不要將該ID放在.bl-content div上。那是你的容器。你想在裏面添加一個div，並給出該地圖的ID。

<section> 
    <div class="bl-box"> 
     <h2 class="bl-icon bl-icon-about">About</h2> 
    </div> 
    <div class="bl-content"> 
     <div id="map"></div> 
    </div> 
    <span class="bl-icon bl-icon-close"></span> 
</section>

class .bl-content被定義爲絕對定位，所以我們希望我們的地圖佔據整個空間。所以把它添加到你的css文件中。

#map { 
    width: 100%; 
    height: 100%; 
}

它不會伸展到瀏覽器的邊緣而沒有額外的工作，因爲容器有一個填充分配給它。但它會填滿整個容器。

來源

2015-11-17 03:53:49

地圖裏格設置不敏感，當改變大小

回答

相關問題