等宽谷歌地图答案

【问题标题】：Fluid-width Google maps等宽谷歌地图
【发布时间】：2012-02-04 19:36:06
【问题描述】：

我的网站有 2 列布局，左侧固定宽度列和右侧流体宽度 Google 地图，填充左侧未占用的其余宽度。

问题： 但是我似乎无法让 Google 地图 <div id="map_canvas"> 保持流畅并占据其余的宽度。我是不是设置错了？谢谢！

HTML

<div id="main_container">
    <div id="sidebar"></div>
    <div id="map_container">
            <div id="map_canvas"></div>
    </div>
</div>

CSS

#main_container {
    width: 100%;
    height: 500px;
    float: left;
    clear: both;
    position: relative;
    z-index: 1;
}

#map_container {
    height: 100%;
    float: left;
    position: relative;
}

#sidebar {
    width: 270px;
    float: left;
}

#map_canvas {
    height: 100%;
    min-width: 100px;
    float: left;
    display: block;
    position: absolute;
    z-order: 1000;
}

【问题讨论】：

这里是修复Set Google Maps Container DIV width and height 100%

标签： css google-maps google-maps-api-3

【解决方案1】：

如果您尝试在地图 div 上使用 style="width:100%;height:100%"，就像您通过提供 100% 高度所做的那样，您会得到一个高度为零的地图 div。这是因为 div 试图成为<body> 大小的百分比，但默认情况下它的高度不确定。

有一些方法可以确定屏幕的高度并将该像素数用作地图 div 的高度，但一个简单的替代方法是更改 <body> 使其高度为页面的 100%。我们可以通过将style="height:100%" 应用于<body> 和<html>. 来做到这一点（我们必须对两者都这样做，否则<body> 会尝试为文档高度的100%，并且默认为那是一个不确定的高度。）

重新调整您的 css 值应该可以解决您的问题。

【讨论】：

@RainbowHat;很高兴我能提供帮助