容器内的谷歌地图答案

【问题标题】：Google map inside container容器内的谷歌地图
【发布时间】：2012-12-05 06:28:20
【问题描述】：

我在将谷歌地图放置在我的容器中时遇到了一些问题，当我将它放入我的任何容器中时它会出现一些问题，它只能在我所有的容器之外工作:(

<section class="lookingfor">
      <ul class="clearfix">
        <li class="homeMap">
            <div id="map_canvas" style="width: 100%; height: 100%"></div>
        </li>
      </ul>
    </section>

找课：

section.lookingfor .skills div.text {font-family: 'Open Sans', sans-serif; color:#666; font-size:14px; line-height:22px;}
section.lookingfor ul li.homeMap {width: 100%; height: 100%;}

不确定第一行是否影响 :O

清除修复：

.clearfix:after {    content: ".";    display: block;    height: 0;    clear: both;    visibility: hidden;    }

homeMap 类：

section.lookingfor ul li.homeMap {width: 100%; height: 100%;}

提前致谢！ :)

【问题讨论】：

有什么问题？此外，您的元素似乎都没有定义position，因此全宽/高度将基于页面本身而不是<section>。如果您的页面有任何其他内容，这可能不是您想要的。

标签： css google-maps

【解决方案1】：

设置

position:relative;

并使用固定的高度和宽度而不是 % 因为 % 会给你 0 高度。 “那是因为 div 试图成为的大小的百分比，但默认情况下 div 的高度是不确定的。”

将解决问题。感谢观看的人:)

【讨论】：

固定高度拧紧控件（放大/缩小，平移左/右/上/下）