css - リーフレット マップの高さを可変にする方法

Question

私のアプリケーションでは、マップのdivを次のように作成していました

<div id="map" style="height: 610px; width:100%"></div>

しかし、マップをレスポンシブにするために、高さも100％にしたいのですが、そうするとうまくいきheight: 100%ません。

どのデバイスでもマップが適切に表示されるように、幅のように高さも可変にするにはどうすればよいですか。

デモ: http://jsfiddle.net/CcYp6/

マップの高さと幅を変更すると、マップが取得されません。

Answer 1

height: 100%;親要素を最初に設定する必要があります

html, body {
   height: 100%;
}

デモ

デモ(親の高さが定義されていないため、これは機能しません)

説明: なぜそれをする必要があるのですか? したがって、要素の高さを指定する%と、発生する最初の質問は次100%のとおりです。デフォルトでは、div の高さは0pxである100%ため、div は機能しませんが、親要素heightを に設定すると機能し100%;ます。