带有搜索结果侧边栏的流畅 Google map 的 CSS

Question

我计划使用 javascript api 包含 google map 来显示我网站的搜索结果。下面是我想要的布局

顶部是标题，我将在其中显示我的常用导航面板。

左边的侧边栏 - 它应该是显示为 ListView 的搜索结果。它的高度应该等于浏览器窗口并且在溢出时它应该滚动。

map 区域 - 这是我将在其上显示搜索结果位置的谷歌地图。这应该是这样的，它填充了所有可用的空间，离开了标题和侧边栏

基本上它应该看起来像 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;*/
}

我无法正确完成。完整的 map 占据了整个屏幕，而不是侧边栏右侧的可见空间。

请帮忙。邀请示例链接。

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