Leaflet.js映射移动高度问题

Question

I have a map I am trying to incorporate into a mobile web app. I am having issues with the height sizing of the map. I am using this code at the moment and you can see it looks ugly since it doesn't come all the way down in the picture below:

<div id="map" style="height: 400px;"></div>

I also tried using the code:

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

But the map doe snot show up at all with that code, and there are no errors reported in chromes inspect element.

Answer 1

You need to set up the height of map according to height of window after you initialize your map

$('#map').height($(window).height()+'px');

If you have header included in your window height like in the image you've attached, you need to exclude the height of that header while setting the height of map div.

For example, your header have 50px height, so set the height of map this way

$('#map').height($(window).height()-50+'px');