使用Google Maps API的CSS定位

我試圖複製網站http://touch.facebook.com，他們有一個側面菜單，顯示頂部菜單上的一個按鈕何時被點擊。基本上如下所示的側菜單（A），頂部菜單（B），和內容（C）的三面板佈局：使用Google Maps API的CSS定位

__________________ 
| |______B_____| 
| A |   | 
| |  C  | 
| |   | 
|___|____________|

以我HTML我打電話甲side_menu，B top_menu，和C map_canvas。 B和C的組合是content。在map_canvas我想放置一個跨越整個屏幕的Google地圖（如高度100％和寬度100％）。我想盡可能地拉伸地圖，以便在計算機或移動設備上很好地查看此網站。

目前我的CSS是這樣的：

body 
{ 
    font-family : sans-serif; 
    direction : ltr; 
    text-align : left; 
    line-height : 18px; 
} 

#side_menu 
{ 
    background : none repeat scroll 0 0 #32394A; 
    overflow : hidden; 
    position : absolute; 
    min-height : 100%; 
    width  : 260px; 
} 

#content 
{ 
    left  : 260px; 
    position : relative; 
} 

#top_menu 
{ 
    position   : relative; 
    border-color  : #111A33; 
    box-shadow  : 0 1px 1px -1px #FFFFFF inset; 
    background-color : #385998; 
    height   : 29px; 
    padding   : 7px 5px; 
} 

#map_canvas 
{ 
    height : 100%; 
    width : 100%; 
}

但 'map_canvas提供'，無法在所有出現。我知道如果我專門輸入一個固定的高度和寬度，那麼它會出現，但我想伸展到屏幕尺寸。這可能嗎？

下面是HTML：

<!DOCTYPE html> 
<html> 
    <head> 
     <link href = "common/css/main.css" rel = "stylesheet" type = "text/css"/> 
    </head> 
    <body> 
     <div id = "side_menu">Side Menu</div> 
     <div id = "content"> 
      <div id = "top_menu">Top Menu</div> 
      <div id = "map_canvas"><!-- The Google map goes here --></div> 
     </div> 
    </body> 
</html>

我也注意到，在地圖被加載後，它增加了一些自己的風格：

<div id="map_canvas" style="position: relative; background-color: rgb(229, 227, 223); overflow: hidden;"> 
    <div style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%; z-index: 0;"> 
     <!-- More Google map mumbo jumbo --> 
    </div> 
</div>

來源

2012-02-01 hobbes3

你需要明確設置高度和寬度#content在您的CSS，因爲map_canvas div是該元素的孩子。看起來您需要使用絕對寬度/相對寬度/高度的組合，使用邊距偏移量或基於JS的大小調整來確保地圖可以完全調整。

但我會首先驗證設置＃內容寬度和高度第一（它應該）。

將術語「mumbo jumbo」併入StackOverflow問題的榮譽。 :-)

來源

2012-02-01 04:39:26 andresf

感謝您的回答。在查看[Google Maps]（http://maps.google.com）CSS代碼後，我意識到無法用純CSS設置相對100％的高度。他們似乎在使用JavaScript動態調整div的高度。所以答案會是100％寬度添加到'＃content'，然後使用JS來動態設置高度。 – hobbes3 2012-02-01 16:57:04

使用Google Maps API的CSS定位

回答

相關問題