如何顯示左側的側面板和Google地圖右側的api畫布，填充頁面的其餘部分？

我需要能夠有一個側面板填充左側頁面的高度和填充右側頁面其餘部分的地圖。無論瀏覽器的大小如何，我都希望側面板的寬度爲300px。此外，我無法移動#panel內的任何div，它們都只是一個接一個地對齊。這是我的CSS：如何顯示左側的側面板和Google地圖右側的api畫布，填充頁面的其餘部分？

body {margin:0;} 
     #panel {height:100%; width:300px; position:absolute; padding:0;background-color:#8C95A0;} 
      #div1 {padding:2px; text-align:center} 
      #div2 {padding:2px; text-align:center} 
      #div3 {padding:2px; text-align:center} 
      #div4 {padding:2px; text-align:center} 
      #div5 {padding:2px; text-align:center} 
       #div5a {padding:2px; text-align:center} 
       #div5b {padding:2px; text-align:center} 
       #div5c {padding:2px; text-align:center} 
      #div6 {padding:2px; bottom:0px; text-align:center} 
     #map_canvas {height:100%; width:1200px; left:300px; position:absolute; padding:0;}

我該如何使#map_canvas填充頁面的其餘部分，以及如何移動我的div？

來源

2012-05-31 Gavin

你能否更新http://jsfiddle.net/上的演示？ – Luis

你需要什麼額外的信息？ – Gavin

[請參閱簡短，自包含，更正，示例]（http://sscce.org/） – Luis

我能夠解決我在我的問題中詢問的兩個問題。首先，我能夠使用相對定位來移動我的div，而不是絕對的。其次，我使用下面的CSS來使地圖填充屏幕的其餘部分，在側面板的右側：

#map_canvas {height：100％;左：300像素;右：0像素;位置：絕對的;填充：0; margin：0;}

來源

2012-06-01 18:18:44 Gavin

<html> 
    <head> 
    <style> 
     html,body { padding:0; margin:0; height:100%; } 
     #panel { background-color: #DDD; position:absolute; top:0; left:0; bottom:0; width:300px; } 
     #map_canvas { background:red; position:absolute; top:0; left:300px; right:0; bottom:0; } 
    </style> 
    </head> 
    <body> 
     <div id="panel"></div> 
     <div id="map_canvas"></div> 
    </body> 
</html>

來源

2012-05-31 22:35:15 Coluccini

我嘗試使用您建議的內容而不是我的內容，它看起來與我以前的內容相同。我的css有什麼問題嗎？ – Gavin

我可以看到完整的html + css代碼嗎？ – Coluccini

如何顯示左側的側面板和Google地圖右側的api畫布，填充頁面的其餘部分？

回答

相關問題