1

I need to be able to have a side panel that fills the height of the page on the left and a map filling the rest of the page on the right. I would like the side panel to have a width of 300px, regardless of the size of the browser with the map to the right of it. Also, I am not able to move any of the divs within #panel, they are all just aligned one after the other. Here's my 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;}

How can I make #map_canvas fill the rest of the page and how can I move my divs?

4

2 回答 2

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>
于 2012-05-31T22:35:15.633 回答
1

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

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

于 2012-06-01T18:18:44.947 回答