我有一个网站的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;
}
解决方法
如果您尝试在地图div上使用style =“width：100％; height：100％”,就像通过给出100％高度一样,您将得到一个高度为零的地图div.这是因为div试图成为< body>大小的百分比,但默认情况下,它具有不确定的高度.
有一些方法可以确定屏幕的高度,并使用该像素数作为地图div的高度,但一个简单的替代方法是更改< body>这样它的高度就是页面的100％.我们可以通过将style =“height：100％”应用于< body>来实现这一点.和< html>. (我们必须对两者执行此操作,否则< body>尝试为文档高度的100％,并且默认值为不确定高度.)
重新调整css值可以解决您的问题.
