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.