Leaflet: Map div does not support 100% height CSS property

[ibalajiarun]

I tried to spread a map on to the full document. Unfortunately, when I set height css property as 100%, the map does not render. But, the map renders for static height pixels. I have created the following jsfiddle for reference: http://jsfiddle.net/QbP2U/5/

[mourner]

JSFiddle doesn't open for me for some reason, but Leaflet does support 100% height without problems — you're probably doing something wrong. See http://leafletjs.com/examples/mobile.html

[ibalajiarun]

I was wrong. I did not set height property to body tags. Thanks

[Omgan]

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

Use this code to make it responsive height of the window

[dstrickler]

Omgan's comment above worked great for me with leaflet 1.0.2
I added a small change which was:
.height() - 220);
as this helped me adjust the alignment to the menu I was using. Also, I needed to remove any CSS I was trying to use to solve the problem.

[josejaner]

this works perfectly, but the setting worked with (- 40)
$(window).on("resize", function () { $("#map").height($(window).height()-40); map.invalidateSize(); }).trigger("resize");

[carsnwd]

I followed what Omgan, dstrickler, and josejaner did. Also since I had my map initialized in a separate function initMap() I had to trigger resize in there as well like below....

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

[stripathix]

Using height in CSS like below:

#map { height: calc(100% - 44px); width: 100%; position: absolute !important; }
Full screen works fine but bounds no longer work correctly. All markers not visible. But if i set height like 800px the bound works fine.

[perliedman]

@stripathix if you think this is an issue, I suggest you open a new one with a clear example illustrating the issue.

Given the information you provided, it sounds highly unlikely this is a Leaflet problem, but rather an issue with how your application uses it. For example, if your map container ever _changes_ size after the map is initialized, make sure to call invalidateSize on your map instance.

[robert-prib-polestar]

You use a wrapper container set to position fixed or absolute to get height 100% working.
e.g.

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

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

It, of course, means you have to use fixed and absolute positing which can be annoying, but better than having to include in JS watching the browser resize.

[dhanyn10]

in my case, this css solve the problem:

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

and give its container position: relative
you can use vw and vh to make your container responsive too.

[luciodale]

@dhanyn10 position: absolute; did the trick!

[MuhammadSulman]

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

Use this code to make it responsive height of the window

its perfectly fine working hack for it, i searched for this kind of solution for last couple of hours but at last i did found it and i am really happy. I test its responsiveness also, which is correct.

[IvanSanchez]

Oh FFS just use 100vh. And read https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Values_and_units about vh and vw and what 100% exactly mean.