フルイド幅のGoogleマップ

私はウェブサイト用の2列のレイアウトを持っています。左側の固定幅の列と右側のフル幅のGoogleマップは、残りの幅を左側の列では使用しません。フルイド幅のGoogleマップ

問題：しかし、私はGoogleが流体であると幅の残りの部分を取るために<div id="map_canvas">をマップするように見えることはできません。私はそれを間違って設定しましたか？ありがとう！

HTML

<div id="main_container"> 
    <div id="sidebar"></div> 
    <div id="map_container"> 
      <div id="map_canvas"></div> 
    </div> 
</div>

CSS

#main_container { 
    width: 100%; 
    height: 500px; 
    float: left; 
    clear: both; 
    position: relative; 
    z-index: 1; 
} 

#map_container { 
    height: 100%; 
    float: left; 
    position: relative; 
} 

#sidebar { 
    width: 270px; 
    float: left; 
} 

#map_canvas { 
    height: 100%; 
    min-width: 100px; 
    float: left; 
    display: block; 
    position: absolute; 
    z-order: 1000; 
}

出典

2012-01-07 Nyxynyx

[GoogleマップコンテナのDIVの幅と高さを100％に設定]（http://stackoverflow.com/a/18147172/782535） –

あなたが100％の高さを与えることによって行ったように、あなたの地図のdivにstyle="width:100%;height:100%"を使用しようとすると、あなたは地図のdivを取得高さがゼロです。 divは<body>のサイズのパーセンテージにしようとしますが、デフォルトでは不確定な高さを持ちます。

画面の高さを決定し、そのピクセル数をマップdivの高さとして使用する方法がありますが、単純な代替方法は、その高さがページの100％になるように<body>を変更することです。これを行うには、<body>と<html>.の両方にstyle="height:100%"を適用する必要があります（それ以外の場合は、<body>はドキュメントの高さの100％を目指します）。

CSS値を再調整すると問題が解決するはずです。

出典

2012-01-07 12:44:08 defau1t

ありがとうございました。非常に便利で、私の問題も解決しました。ありがとう – CodeGuru

@RainbowHat;私が助けになることができてうれしい – defau1t

フルイド幅のGoogleマップ

答えて

関連する問題