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

Question

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

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

ただし、マップをレスポンシブにするために、height: 100%その後、動作していません。

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

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

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

Answer 1

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

html, body {
   height: 100%;
}

デモ

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

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

Answer 2

JavaScriptでdivサイズを設定する必要があります。

$("#map").height($(window).height()).width($(window).width());
map.invalidateSize();

完全な例 here を見つけることができます。

Answer 3

新しいブラウザではheight = "100vh"を使用してください。でも、大丈夫です。