Google マップに 100% の幅と高さを表示しようとしています。いくつかの例を検索しましたが、機能させることができません。ページはこちら
私は頭の中でこのCSSを使用しました
<style type="text/css">
html, body { height:100%; }
</style>
そしてこれはマップのdivインラインにあります
<div id="map" style="width:100%; height:100%;">indenfor</div>
地図が表示されない
代わりにこれを行うと
<div id="map" style="width:500px; height:500px;">indenfor</div>
マップは 500x500 ピクセルで表示されます。
私は何を間違っていますか？
マップには高さと幅の両方が必要です。
<style type="text/css">
html, body { height:100%; width:100%;}
</style>
min-height: 100%マップのスタイルに合わせて使ってみてくださいdiv。
http://www.tutwow.com/htmlcss/quick-tip-css-100-height/
それがうまくいかない場合は、Javascript でウィンドウの幅と高さを取得し、マップ要素のスタイルを動的に設定して、これらのパラメーターを満たすこともできます。
あなたはそれを解決したようです
#map { height : 100%; width : 100%; top : 0; left : 0; position : absolute; z-index : 200;}
mapの親がないため機能するためposition:relative、ウィンドウに相対的に配置されます。
mapただし、親が であってもウィンドウに相対的に配置したい場合は、代わりに をposition:relative使用する必要があります。position:fixedposition:absolute
さらに、それほど巨大なを使用する必要はありませんz-index。
余分な style-tag があります。削除してください:
<style type="text/css" media="screen">
<style type="text/css">
html, body { height:100%; }
</style>
以下の例では、 に適用style="height: 100%;"するbodyとhtml、Google マップが完全な高さになります。これdivは、 に読み込まれるマップが の子であるためですbody。あなたの場合、style="height: 100%;"の関連する親要素に追加する必要があります#map。
関連している：