如何在左侧显示侧面板，在右侧显示 Google 地图 api 画布，填充页面的其余部分？答案

【问题标题】：How to display a side panel on the left and Google maps api canvas on the right, filling remainder of page?如何在左侧显示侧面板，在右侧显示 Google 地图 api 画布，填充页面的其余部分？
【发布时间】：2012-06-06 04:36:34
【问题描述】：

我需要能够有一个填充左侧页面高度的侧面板和一个填充右侧页面其余部分的地图。我希望侧面板的宽度为 300 像素，无论浏览器的大小如何，地图位于其右侧。此外，我无法在#panel 中移动任何 div，它们都只是一个接一个地对齐。这是我的CSS：

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？

【问题讨论】：

你能更新jsfiddle.net上的演示吗？
您还需要哪些额外信息？
See Short, Self contained, Correct, Example

标签： javascript css google-maps-api-3 position positioning

【解决方案1】：

<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>

【讨论】：

我尝试使用您建议的而不是我拥有的，它看起来和我之前的一样。我的 CSS 有什么问题吗？

【解决方案2】：

我能够解决我在问题中询问的两个问题。首先，我能够使用相对定位在侧面板中移动我的 div，而不是绝对。其次，我使用以下 css 使地图填充屏幕的其余部分，位于侧面板的右侧：

#map_canvas {高度：100%;左：300px；右：0px；位置：绝对；填充：0；边距：0;}

【讨论】：