1

左側のページの高さを埋めるサイドパネルと、右側のページの残りの部分を埋めるマップを用意する必要があります。右側に地図があるブラウザのサイズに関係なく、サイドパネルの幅を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を移動するにはどうすればよいですか？

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

質問で尋ねた2つの問題を修正することができました。まず、相対位置を使用して、絶対値ではなく、サイドパネルでdivを移動することができました。次に、次のcssを使用して、サイドパネルの右側にある画面の残りの部分にマップを塗りつぶしました。

#map_canvas {高さ：100％; 左：300px; 右：0px; 位置：絶対; パディング：0; マージン：0;}

于 2012-06-01T18:18:44.947 に答える