Question

我不确定css和html结构

这是我的HTML

<div class="row">
<div class="col-lg-4">  
    <div class="panel panel-primary">
        <div class="panel-heading">View Plan</div>
        <div class="dam-holder"></div>
    </div>
</div>
<div class="col-lg-8">
    <div class="gmaps"><div id="gmap_geocoding"></div></div>
</div>
</div>

和css

.gmaps {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    min-height: 100px;
    max-height: 100%;
    text-align: left;
    overflow: hidden;
}
.gmaps > div{
   width: 100%;
   height: 100%;
   /* position: absolute; */
   z-index: 0;   
}

您可以在此处查看地图https://foursquare.com/explore?mode=url&near=Tokyo%2C%20T%C5%8Dky%C5%8D-to%2C%20Japan&q=Coffee%20Shop

提前谢谢

Answer 1

您可以使用CSS position:absolute相应地放置地图。将所有容器设置为100％高度，并使用overflow-y:scroll使左侧col独立滚动。 CSS3 height:calc(100% - 0);可用于确保地图始终为全高。

#map-canvas {
    width:33.3333%;
    height:calc(100% - 0);
    z-index:-1;
    position:absolute;
    right:0;
    top:0;
}

这是一个可以帮助你的工作示例...

http://www.bootply.com/129229

如何使用bootstrap 3.0显示像foursquare的地图

1 个答案: