Leaflet: A div do mapa não suporta a propriedade CSS de 100% de altura

O JSFiddle não abre para mim por algum motivo, mas o Leaflet suporta 100% de altura sem problemas - você provavelmente está fazendo algo errado. Consulte http://leafletjs.com/examples/mobile.html

Eu estava errado. Eu não configurei a propriedade height para tags body. Obrigado

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

Use este código para torná-lo responsivo à altura da janela

O comentário de Omgan acima funcionou muito bem para mim com o folheto 1.0.2
Eu adicionei uma pequena alteração que foi:
.height() - 220);
pois isso me ajudou a ajustar o alinhamento ao menu que eu estava usando. Além disso, eu precisava remover qualquer CSS que estava tentando usar para resolver o problema.

isso funciona perfeitamente, mas a configuração funcionou com (- 40)
$(window).on("resize", function () { $("#map").height($(window).height()-40); map.invalidateSize(); }).trigger("resize ");

Eu segui o que Omgan, dstrickler e josejaner fizeram. Além disso, desde que eu inicializei meu mapa em uma função separada initMap(), tive que acionar o redimensionamento lá, assim como abaixo ....

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") }

Usando altura em CSS como abaixo:

#map { height: calc(100% - 44px); width: 100%; position: absolute !important; }
A tela cheia funciona bem, mas os limites não funcionam mais corretamente. Todos os marcadores não visíveis. Mas se eu definir a altura como 800px, o limite funciona bem.

@stripathix se você acha que isso é um problema, sugiro que você abra um novo com um exemplo claro ilustrando o problema.

Dadas as informações que você forneceu, parece altamente improvável que isso seja um problema do Leaflet, mas sim um problema de como seu aplicativo o usa. Por exemplo, se seu contêiner de mapa _alterar_ tamanho depois que o mapa for inicializado, certifique-se de chamar invalidateSize em sua instância de mapa.

Você usa um contêiner wrapper definido para posição fixa ou absoluta para obter a altura 100% funcionando.
por exemplo

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

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

Isso, é claro, significa que você precisa usar posicionamento fixo e absoluto, o que pode ser irritante, mas é melhor do que incluir no JS observando o redimensionamento do navegador.

no meu caso, este css resolve o problema:

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

e dê ao seu contêiner position: relative
você pode usar vw e vh para tornar seu contêiner responsivo também.

@dhanyn10 position: absolute; fez o truque!

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

Use este código para torná-lo responsivo à altura da janela

seu hack funciona perfeitamente bem para isso, procurei esse tipo de solução nas últimas duas horas, mas finalmente encontrei e estou muito feliz. Eu testo sua capacidade de resposta também, o que está correto.

Oh FFS apenas use 100vh . E leia https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Values_and_units sobre vh e vw e o que 100% significa exatamente.