web-dev-qa-db-ja.com

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

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

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

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

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

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

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

29
vaibhav shah

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

html, body {
   height: 100%;
}

デモ

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

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

29
Mr. Alien

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

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

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

25
jgillich

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

10
user8207609