CSS流體Google地圖帶邊欄搜索結果

Question

我打算使用javascript api顯示Google地圖來顯示我的網站的搜索結果。 以下是我想要的佈局

頂部將是標題，我會顯示我的通用導航面板。

左邊的側邊欄應該是顯示爲列表視圖的搜索結果。它的高度應該等於瀏覽器窗口，並且在溢出時它應該滾動。

地圖區域 - 這是我將顯示搜索結果位置的谷歌地圖。這應該是這樣的，它填補所有可用空間留下頭部和側邊欄

基本上它看起來應該像 this website或正常google places search

HTML代碼

<div class="wrapper_test" > 
    <div class="full_map" id="search_map"> 
     <div id="map_canvas" style="width:100%; height:100%"> 
     </div> 
    </div> 
    <div class="test_left" id="search_result" > 
    </div> 
</div> 

CSS代碼

.wrapper_test{ 
    overflow:auto; 
    height:100%; 
    width:100%; 
} 
.test_left{ 
    width:530px; 
    background-color:#006666; 
    height:100%; 
    float:left; 
    overflow:scroll; 
    overflow-style:auto; 
    z-index:10; 
    position:absolute; 
    top:0px; 
    overflow-x:hidden; 
} 
.full_map{ 

    height:100%; 
    background-color:#FFCC00; 
    overflow:scroll; 
    overflow-style:auto; 
    position:relative; 
    left:530px; 
    overflow-x:hidden; 
    /*border:5px solid #fff;*/ 
} 

我無法做到這一點。完整的地圖佔用了整個屏幕而不是可見的空間在側邊欄的右側。

請幫助。例子的鏈接被邀請。從具有

Answer 1

更改.full_map：

left: 530px; 

到

padding-left: 530px; 

使您.full_map類看起來是這樣的：

.full_map{ 

    height:100%; 
    background-color:#FFCC00; 
    overflow:scroll; 
    overflow-style:auto; 
    position:relative; 
    padding-left:530px; 
    overflow-x:hidden; 
    /*border:5px solid #fff;*/ 
}