Css 流体宽度谷歌地图

我有一个2栏的网站布局，左边是固定宽度的栏，右边是流动宽度的谷歌地图，它填充了左边栏没有占据的其余宽度

问题：然而，我似乎无法让谷歌地图

保持流畅，占据剩余的宽度。我设置错了吗？谢谢

HTML

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

---

如果您尝试在地图div上使用

style=“width:100%；height:100%”

，就像您通过提供100%高度所做的那样，您会得到一个高度为零的地图div。这是因为div试图成为

大小的一个百分比，但默认情况下具有不确定的高度

有多种方法可以确定屏幕的高度，并使用该像素数作为map div的高度，但一个简单的替代方法是更改

，使其高度为页面的100%。我们可以通过将

style=“height:100%”

应用于

和

来实现这一点（我们必须同时应用于这两个对象，否则

尝试为文档高度的100%，默认高度是不确定的。）

---

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

@RainbowHat；很高兴我能帮上忙这是解决办法

#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;
}