我在Google Map Page上工作時遇到了一個有趣的問題。其實我希望地圖DIV將覆蓋70％的寬度，剩餘30％用於我的菜單，60％的高度剩下40％用於我的網站橫幅。在百分比DIV中正確調整Google地圖的尺寸
當我用％指定div高度和寬度時，地圖不會正確呈現，而是根據指定的％屬性收縮到頂部或左側。但是，當我明確地分配px的高度和寬度，例如400px時，地圖將完美渲染。
我也曾嘗試minwidht和風格了minHeight屬性
任何幫助，請...
它確實取決於您當前的HTML和CSS，但這裏有一種方法。
主佈局使用YUI Grids框架進行了一些調整，以更正地圖的高度。正如Gutzofter所提到的，修復的關鍵是爲所有地圖的祖先元素分配適當的高度。下面的代碼在IE6，IE7，IE8，Chrome瀏覽器3和Firefox 3.5
測試託管演示：http://jsbin.com/okeja（編輯通過http://jsbin.com/okeja/edit）
完整的源：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Maps Demo</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<script src="http://www.google.com/jsapi?key=ABQIAAAAyxeu8JwbgrekKUEdhxe4EBTWx8njL9qYLnq46LoOVGM6mIGTuxQWuJ3Va3yaItAmIEsT4jgllHk5Ig" type="text/javascript"></script>
<link rel="stylesheet" href="http://yui.yahooapis.com/2.7.0/build/reset-fonts-grids/reset-fonts-grids.css" type="text/css">
<style type="text/css" media="screen">
html { height: 100%; background-color: #000; overflow: hidden; }
body { height: 100%; background-color: #000; font: 16px Helvetica, Arial; color: #fff; }
a:link, a:visited, a:hover { color: gray; }
#doc3 { height: 100%; padding:0; margin: 0; }
#bd { height: 100%;}
.container { height: 60%; }
.map { height: 100%; }
#map_canvas { height: 100%; }
.content { overflow-y: auto; height: 40%; }
</style>
</head>
<body>
<div id="doc3" class="yui-t7">
<div id="bd">
<div class="yui-gf container">
<div class="yui-u first">
<ul>
<li><a href="#foo">foo</a></li>
<li><a href="#bar">bar</a></li>
<li><a href="#baz">baz</a></li>
<li><a href="#spam">spam</a></li>
<li><a href="#eggs">eggs</a></li>
</ul>
</div>
<div class="yui-u map">
<div id="map_canvas"></div>
</div>
</div>
<div class="yui-g content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia diam quis ipsum iaculis blandit. In mattis nibh ac velit congue a vehicula erat facilisis. Nam imperdiet nulla id tellus commodo et cursus urna aliquam. Donec vestibulum, eros ac rhoncus sodales, mi lacus elementum turpis, quis varius augue orci eget est. In vel vehicula erat. Aliquam eu orci lorem. Nullam a nisi adipiscing purus imperdiet convallis vitae varius elit. Mauris eu hendrerit eros. Sed at nunc sit amet sapien bibendum varius et eu augue. Nulla nisi est, bibendum id interdum vitae, fringilla eu mi. In et dolor est, quis rutrum enim. Vivamus quam nulla, euismod in elementum at, pulvinar nec est. Praesent tincidunt venenatis libero vitae interdum. Nam mattis molestie ligula, et laoreet risus eleifend eu.
Proin sodales lacus quis sem congue venenatis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer dictum enim a nibh pharetra venenatis. Cras lacinia nibh in eros malesuada id rhoncus erat mattis. Mauris urna ipsum, vulputate nec malesuada ut, volutpat vel magna. Duis blandit, dolor quis convallis faucibus, orci arcu vulputate nulla, a ullamcorper ligula risus eu mi. Quisque magna mauris, molestie id luctus id, aliquam vitae leo. Proin ut ligula et lacus iaculis sollicitudin. Fusce blandit consectetur nisi at cursus. Donec tincidunt sem et justo dapibus eu facilisis nunc laoreet. Quisque nibh urna, convallis ac ullamcorper in, dapibus et arcu. Nullam vel posuere nulla. Maecenas sed erat quam, placerat imperdiet metus.
Vivamus scelerisque, metus vitae venenatis pulvinar, ante libero auctor nisi, id malesuada orci tellus mattis nunc. Cras pretium sem nec est suscipit dictum. Etiam viverra fermentum augue, a gravida velit facilisis sed. Cras quis velit tortor, sit amet pellentesque leo. Mauris ligula nisi, tincidunt at faucibus a, aliquam vel elit. Etiam fringilla diam nisl, faucibus vestibulum justo. Aliquam erat volutpat. Sed diam diam, sodales eget mattis varius, vehicula at ipsum. Suspendisse semper blandit neque, vel bibendum dolor tincidunt at. Sed eleifend mollis metus vitae vehicula. Proin in augue vitae velit auctor vulputate. Sed auctor dictum blandit. Sed diam mi, aliquet vitae tempus sed, pharetra vel felis. Praesent tincidunt ipsum faucibus odio scelerisque quis lobortis odio facilisis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
</p>
</div>
</div>
</div>
<script>
function mapsLoaded() {
var map = new google.maps.Map2(document.getElementById("map_canvas"));
map.setMapType(G_SATELLITE_MAP);
map.enableContinuousZoom();
var geocoder = new GClientGeocoder();
geocoder.getLatLng('Dubai', function(latLng){
map.setCenter(latLng, 7);
for (var i = 0; i < 4; i++) {
after(3 * i, function(){map.zoomIn(null, null, true)});
}
});
}
function after(seconds, fn) {
setTimeout(fn, seconds * 1000);
}
function loadMaps() {
google.load("maps", "2", {"callback" : mapsLoaded});
google.load("jquery", "1.3");
}
loadMaps();
</script>
</body>
</html>
+1這絕對是比我更好的答案。代碼對我來說總是比語言更響亮。 – Gutzofter 2009-10-19 17:34:40
嘗試使用周圍的地圖畫布上的地圖，包裝DIV並設置在地圖上的包裝器的百分比。你可能想看看這book。本書詳細介紹了自動調整大小。摘自google books，閱讀第6章。它主要通過一些JavaScript和CSS完成。
是頁面生活？我們可以獲得鏈接嗎？當你看到代碼時，這些問題通常會變得更容易... – dicroce 2009-10-18 15:12:25
對不起，我不能給你的鏈接，因爲它不會工作沒有用戶名和密碼，並有敏感的數據，但代碼是如此簡單