web-dev-qa-db-fra.com

comment rendre variable la hauteur de la carte du dépliant

Dans ma demande, je faisais une division de la carte

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

mais pour que ma carte soit réactive, je veux que la hauteur soit égale à 100%, si je fais height: 100% alors ça ne marche pas.

Comment puis-je rendre la hauteur aussi variable que la largeur afin que la carte puisse être vue correctement sur n'importe quel appareil.

Démo: http://jsfiddle.net/CcYp6/

Si vous modifiez la hauteur et la largeur de la carte, vous n'obtiendrez pas la carte.

cssleaflet
29
vaibhav shah

Vous devez définir les éléments parents sur height: 100%; premier

html, body {
   height: 100%;
}

Démo

Démo (Cela ne fonctionnera pas car aucune hauteur parent n'est définie)

Explication: Pourquoi avez-vous besoin de faire cela? Ainsi, lorsque vous spécifiez la hauteur d'un élément dans % alors la 1ère question qui se pose est: 100% de quoi? Par défaut, une div a une hauteur de 0px, donc 100% pour un div ne fonctionnera tout simplement pas, mais définir les éléments parents height sur 100%; marchera.

29
Mr. Alien

Vous devez définir la taille div avec JavaScript.

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

Vous pouvez trouver un exemple complet ici .

25
jgillich

Use height = "100vh" fonctionne dans un navigateur plus récent. mais c'est OK.

10
user8207609