如何在左侧显示侧面板并在右侧显示api画布，填充页面的其余部分？ [英] How to display a side panel on the left and Google maps api canvas on the right, filling remainder of page?

问题描述

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

  body {margin：0;} 
 #panel {height：100％;宽度：300像素;位置：绝对的; 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;底部：0像素; text-align：center} 
 #map_canvas {height：100％;宽度：1200像素;左：300像素;位置：绝对的; padding：0;} 
  

如何让#map_canvas填充页面的其余部分，以及如何移动我的div？

解决方案

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

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

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?

解决方案

I was able to fix the two problems I enquired about in my question. Firstly, I was able to use relative positioning to move my divs around in the side panel instead of absolute. Secondly, I used the following css to make the map fill the rest of the screen, to the right of the side panel:

#map_canvas {height:100%; left:300px; right:0px; position:absolute; padding:0; margin:0;}

这篇关于如何在左侧显示侧面板并在右侧显示api画布，填充页面的其余部分？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！