谷歌地圖css高度

Question

我想根據頁面高度設置地圖高度。在我的情況下，我有彈出式窗口，其中包含兩個div：左邊是「方向」div，它可以比彈出窗口更高，並且是正常可以改變的，右邊是地圖方向。地圖是彈出式窗口的全高，但當我向下滾動時，底部會出現白色條紋。鏈接（當打開時，重新大小下來到小窗口，並嘗試提及）：

Link to page

HTML：

<div class="search_box"> 
    <div id="header"> 
     <img src="<?php echo base_url('images/logo.jpg'); ?> "> 
    </div> 
    <div class="content"> 
     <div id="directions"> 
     </div> 
    </div> 
    </div> 

     <div id="map_box"> 
      <div id="slo_map"> 
       <?php echo $map['html']; ?> 
      </div> 
     </div> 

CSS

.search_box { 
    width: 390px; 
    float: left; 
    min-height: 800px; 
    overflow: hidden; 
} 
#header { 
    height: 121px; 
    width: 100%; 
    text-align: center; 

} 
.search_box .content { 
    padding: 15px; 
} 
#directions { 
    background-color: white; 
    float: left; 
    width:350px; 
    height: 100%; 
} 
#slo_map { 
    height: 100%; 
    width: auto; 
    overflow: hidden; 
} 

#map_box { 
    height: 100%; 
    width: auto; 
    overflow: hidden; 
    border-left: 1px solid #6d6d6d; 
} 

彈出的javascript：

function popup(mylink, windowname) 
    { 
     if (! window.focus)return true; 
     var href; 
     if (typeof(mylink) == 'string') 
      href=mylink; 
     else 
      href=mylink.href; 
     window.open(href, windowname, 'width=1200,height=800,scrollbars=yes'); 
     return false; 
    } 

任何想法如何定期設置CSS來顯示頁面全高的地圖，而不僅僅是可見的窗口？

謝謝！

Answer 1

相反的方法可能適合您的需要：將邊欄設置爲100％高度並讓溢出的內容滾動。

.search_box { 
    width: 390px; 
    float: left; 
    height: 100vh; 
    overflow-y: scroll; 
}