流体宽度的Google地图 [英] Fluid-width Google maps
问题描述
我有一个网站的2列布局，左边固定宽度的列和右流体宽度的Google地图，填充不是由左栏占用的其余宽度。
I have a 2 column layout for the website, with the left fixed-width column and a right fluid-width Google maps that fills the rest of the width not taken by the left column.
问题：但我似乎无法获取Google地图< div id =map_canvas> 是流体，并占据其余的宽度。我错误地设置了它吗？谢谢！
Problem: However I cannot seem to get Google maps <div id="map_canvas"> to be fluid and take up the rest of the width. Did I set it up wrongly? Thanks!
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;
}
推荐答案
code> style =width：100％; height：100％在你的地图div上，你通过给出100％的高度，你得到一个高度为零的地图div。这是因为div试图成为< body> 大小的一定百分比，但默认情况下它的高度不确定。
If you try to use style="width:100%;height:100%" on your map div, as you have done by giving 100% height, you get a map div that has zero height. That's because the div tries to be a percentage of the size of the <body>, but by default the has an indeterminate height.
有些方法可以确定屏幕的高度，并使用像素数作为map的高度，但一个简单的替代方法是改变< body> ，使其高度为页面的100％。我们可以通过将< body> 和 style =height：100％ code>< html>。（我们必须这样做，否则< body> ）
There are ways to determine the height of the screen and use that number of pixels as the height of the map div, but a simple alternative is to change the <body> so that its height is 100% of the page. We can do this by applying style="height:100%" to both the <body> and the <html>. (We have to do it to both, otherwise the <body> tries to be 100% of the height of the document, and the default for that is an indeterminate height.)
重新调整您的css值应该可以解决您的问题。
Re-adjusting your css values should resolve your issue.
这篇关于流体宽度的Google地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
