Google Maps APIを使用したCSSの配置

ウェブサイトhttp://touch.facebook.comをコピーしようとしています。トップメニューのボタンがクリックされたときに表示されるサイドメニューがあります。基本的にサイドメニュー（A）、トップメニュー（B）、及び含有量（C）の三パネルレイアウト以下に示すとおりGoogle Maps APIを使用したCSSの配置

__________________ 
| |______B_____| 
| A |   | 
| |  C  | 
| |   | 
|___|____________|

私のHTMLでIはB top_menu、side_menuを呼び出し、そしてC map_canvas。 BとCの組み合わせはcontentです。 map_canvasでは、画面全体（高さ100％、幅100％など）にまたがるGoogleマップを配置したかったのです。できるだけ地図を伸ばして、このサイトをコンピュータやモバイル機器でうまく見るようにしたいと思います。

現在、私のCSSは次のようになります。

body 
{ 
    font-family : sans-serif; 
    direction : ltr; 
    text-align : left; 
    line-height : 18px; 
} 

#side_menu 
{ 
    background : none repeat scroll 0 0 #32394A; 
    overflow : hidden; 
    position : absolute; 
    min-height : 100%; 
    width  : 260px; 
} 

#content 
{ 
    left  : 260px; 
    position : relative; 
} 

#top_menu 
{ 
    position   : relative; 
    border-color  : #111A33; 
    box-shadow  : 0 1px 1px -1px #FFFFFF inset; 
    background-color : #385998; 
    height   : 29px; 
    padding   : 7px 5px; 
} 

#map_canvas 
{ 
    height : 100%; 
    width : 100%; 
}

しかし、 'map_canvasは' まったく表示されません。私は具体的に固定された高さと幅を入力するとわかります、それが表示されますが、私はそれを画面のサイズまで伸ばしたいです。これは可能ですか？ここで

はHTMLです：

<!DOCTYPE html> 
<html> 
    <head> 
     <link href = "common/css/main.css" rel = "stylesheet" type = "text/css"/> 
    </head> 
    <body> 
     <div id = "side_menu">Side Menu</div> 
     <div id = "content"> 
      <div id = "top_menu">Top Menu</div> 
      <div id = "map_canvas"><!-- The Google map goes here --></div> 
     </div> 
    </body> 
</html>

私もマップがロードされるの後、それはそれ自身のいくつかのスタイルを追加することに気付きました：

<div id="map_canvas" style="position: relative; background-color: rgb(229, 227, 223); overflow: hidden;"> 
    <div style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%; z-index: 0;"> 
     <!-- More Google map mumbo jumbo --> 
    </div> 
</div>

出典

2012-02-01 hobbes3

あなたが明示的に高さを設定する必要がありますCSSの#contentの幅は、map_canvas divがその要素の子であるためです。絶対幅と相対幅/高さの組み合わせ、余白オフセット、またはJSベースのサイズ変更のいずれかを使用して、マップが最大限に調整されるようにする必要があるようです。

しかし、最初に#contentの幅と高さを設定することがまず必要であることを確認することから始めます。

Stackoverflowの質問に「mumbo jumbo」という言葉を組み込むことを誇りに思う人。 :-)

出典

2012-02-01 04:39:26 andresf

答えをありがとう。私が[Googleマップ]（http://maps.google.com）のCSSコードを見た後、純粋なCSSで100％の相対的な高さを設定する方法がないことに気付きました。 JavaScriptを使用してdivの高さを動的に調整しているようです。答えは100％幅を '＃content 'に追加し、次にJSを使って高さを動的に設定することです。 – hobbes3

Google Maps APIを使用したCSSの配置

答えて

関連する問題