Question

我需要能够拥有一个填充左侧页面高度的侧面板和一个填充右侧页面其余部分的地图。我希望侧面板的宽度为300px，无论浏览器的大小如何，右边的地图都是如此。此外，我无法移动#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？

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

Answer 2

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

#map_canvas {height：100％;左：300像素;右：0像素;位置：绝对的;填充：0;余量：0;}

如何在左侧显示侧面板，在右侧显示Google maps api canvas，填充页面的其余部分？

2 个答案: