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;*/ 
}