Nyx*_*nyx 7 css google-maps google-maps-api-3
我有一个网站的2列布局,左侧固定宽度列和右侧流体宽度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;
}
def*_*u1t 12
如果您尝试style="width:100%;height:100%"在地图div上使用,就像通过提供100%高度一样,您将得到一个高度为零的地图div.这是因为div试图成为其大小的百分比<body>,但默认情况下具有不确定的高度.
有几种方法可以确定屏幕的高度,并使用该像素数作为地图div的高度,但一个简单的替代方法是更改它<body>,使其高度为页面的100%.我们可以通过应用做到这一点style="height:100%"到两个<body>和<html>.(我们不得不这样做是为了两个,否则<body>试图将文档的高度的100%,并且默认是不确定的高度.)
重新调整您的CSS值应该可以解决您的问题.