流体宽度谷歌地图

我有一个网站的2列布局，左边的固定宽度的列和右边的流体宽度谷歌地图填充左列未采取的其余宽度。流体宽度谷歌地图

问题：但是我似乎无法让谷歌地图<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; 
}

来源

2012-01-07 Nyxynyx

下面是修复[设置谷歌地图容器DIV宽度和高度100％]（http://stackoverflow.com/a/18147172/782535） – 2013-08-09 13:11:07

如果你试图在你的地图格使用style="width:100%;height:100%"，因为你已经给予100％的高度完成后，你会得到一个地图的div没有高度。这是因为div试图成为<body>大小的百分比，但默认情况下它具有不确定的高度。

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

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

来源

2012-01-07 12:44:08 defau1t

谢谢你defau1t，非常有用，也解决了我的问题。谢谢 – CodeGuru 2012-12-18 14:03:52

@RainbowHat;很高兴我能帮上忙 – defau1t 2012-12-18 14:46:39

流体宽度谷歌地图

回答

相关问题