Leaflet: Map div ne prend pas en charge la propriété CSS de 100 % de hauteur

JSFiddle ne s'ouvre pas pour moi pour une raison quelconque, mais Leaflet prend en charge 100% de hauteur sans problème - vous faites probablement quelque chose de mal. Voir http://leafletjs.com/examples/mobile.html

J'avais tort. Je n'ai pas défini la propriété height sur les balises body. Merci

$(window).on("resize", function () { $("#map").height($(window).height()); map.invalidateSize(); }).trigger("resize");

Utilisez ce code pour le rendre responsive hauteur de la fenêtre

Le commentaire d'Omgan ci-dessus a très bien fonctionné pour moi avec le dépliant 1.0.2
J'ai ajouté un petit changement qui était:
.height() - 220);
car cela m'a aidé à ajuster l'alignement sur le menu que j'utilisais. De plus, j'avais besoin de supprimer tout CSS que j'essayais d'utiliser pour résoudre le problème.

cela fonctionne parfaitement, mais le réglage fonctionnait avec (- 40)
$(window).on("resize", function () { $("#map").height($(window).height()-40); map.invalidateSize(); }).trigger("resize ");

J'ai suivi ce qu'ont fait Omgan, dstrickler et josejaner. De plus, comme j'avais initialisé ma carte dans une fonction distincte initMap(), j'ai dû également déclencher le redimensionnement comme ci-dessous ....

function initMap() { map = L.map('mapid').setView([40.060620, -77.523182], 17); L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', { maxZoom: 18, id: 'streets-v9', accessToken: 'xxxxx' }).addTo(map); tilesLoaded = true; $("#mapid").trigger("resize") }

Utilisation de la hauteur en CSS comme ci-dessous :

#map { height: calc(100% - 44px); width: 100%; position: absolute !important; }
Le plein écran fonctionne bien mais les limites ne fonctionnent plus correctement. Tous les marqueurs ne sont pas visibles. Mais si je règle la hauteur comme 800px, la limite fonctionne bien.

@stripathix si vous pensez que c'est un problème, je vous suggère d'en ouvrir un nouveau avec un exemple clair illustrant le problème.

Compte tenu des informations que vous avez fournies, il semble très peu probable qu'il s'agisse d'un problème de Leaflet, mais plutôt d'un problème lié à la manière dont votre application l'utilise. Par exemple, si votre conteneur de carte change de taille après l'initialisation de la carte, assurez-vous d'appeler invalidateSize sur votre instance de carte.

Vous utilisez un conteneur d'emballage défini sur une position fixe ou absolue pour obtenir une hauteur de travail à 100 %.
par exemple

.map-wrapper { width: 100%; height:100%; position: fixed;}
#map { width: 100%; height:100%; position: relative;}

Voir https://jsfiddle.net/robertpribpolestar/xg41w12v/3/

Cela signifie bien sûr que vous devez utiliser une position fixe et absolue qui peut être ennuyeuse, mais mieux que d'avoir à inclure dans JS en regardant le redimensionnement du navigateur.

dans mon cas, ce css résout le problème:

#map{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

et donnez à son contenant position: relative
vous pouvez également utiliser vw et vh pour rendre votre conteneur réactif.

@dhanyn10 position: absolute; a fait l'affaire !

$(window).on("resize", function () { $("#map").height($(window).height()); map.invalidateSize(); }).trigger("resize");

Utilisez ce code pour le rendre responsive hauteur de la fenêtre

son hack de travail parfaitement bien pour cela, j'ai cherché ce genre de solution au cours des deux dernières heures mais enfin je l'ai trouvé et je suis vraiment heureux. Je teste sa réactivité également, qui est correcte.

Oh FFS, utilisez simplement 100vh . Et lisez https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Values_and_units à propos vh et vw et ce que signifie exactement 100% .