用于搜索结果侧边栏的流畅 Google 地图的 CSS

Question

我计划使用 javascript api 包含谷歌地图以显示我网站的搜索结果。 下面是我想要的布局

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

左侧的侧边栏 - 它应该是显示为列表视图的搜索结果。它的高度应该等于浏览器窗口，溢出时它应该滚动。

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

基本上它应该类似于 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;*/
}