10

I have been trying to change the height of my leaflet map to a percentage inside of bootstrap but everytime I do the map will not draw. Thus, I always have to revert to px value. I'm pretty sure its a simple setting that I'm missing since I am a CSS novice. Here is my css.

<style type="text/css">
  body {
    padding-top: 60px;
    padding-bottom: 40px;
  }
  #map {
    height: 75%;
  }
</style>
  • 3
    please provide more info: how does your markup look? Can you produce a minimal example showing the problem? – atlefren Jun 3 '13 at 12:04
11

I've always had issues with map height in bootstrap as the margin on the top can be different when the width of the map changes to get 100% height (but with a nav bar on the top) I end up using

var mapmargin = 50;
$('#map').css("height", ($(window).height() - mapmargin));
$(window).on("resize", resize);
resize();
function resize(){

    if($(window).width()>=980){
        $('#map').css("height", ($(window).height() - mapmargin));    
        $('#map').css("margin-top",50);
    }else{
        $('#map').css("height", ($(window).height() - (mapmargin+12)));    
        $('#map').css("margin-top",-21);
    }

}

which is ugly but gets the job done.

5

[2019 UPDATE]

As of 2019/05/15 Flexbox has 94.66% browser support and is a great option for making Leaflet responsive using the flex-grow property.

View a CodePen Demo here

It's set-up so that it will still render on browsers that don't support Flexbox just those users will have to scroll abit

¯\_(ツ)_/¯

============================================================

[OLD POST]

This worked for me.

Note: I wanted my map not to be 100% width on large screens so I added

.container{max-width:60em;} /* Remove for full screen */

HTML

<div id="map-holder">
  <div class="container fill">
    <div id="map"></div>
  </div>
</div>

CSS

#map
{
    width: 100px;
    height:100px;
    min-height: 100%;
    min-width: 100%;
    display: block;
}

html, body
{
    height: 100%;
}

#map-holder{
    height: 100%;
}

.fill
{
    min-height: 100%;
    height: 100%;
    width: 100%;
    max-width: 100%;
}

.container{
    max-width:60em;
    padding: 0.2em;
}
  • 1
    worked for me. actually the best answer at all – g07kore Jun 17 '16 at 21:29
4

The problem is #map is a child of body and you can only specify percentage heights for child elements if it's parent has a explicitly defined height.

<style type="text/css">
    body {
        padding-top: 60px;
        padding-bottom: 40px;
        height: 480px;
        }
    #map {
        height: 75%;
        }
</style>

This would create what you desire, but usable area would never grow larger then 75% of 480px. Normally a div collapses when there is not an content, but with Leaflet, even though your map is in the div it is not calculated at render, therefore collapse at render. If you want the content to take all of the vertical space, you can query window size at page load with some javascript and set the height that way.

3

Just add a height:100% to the html and body tags so they have a defined height and can be used as reference and it should work.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Height sample</title>
<style type="text/css">
    html, body { 
        height:100%
    }
    #map {
        margin: 1em auto;
        height:70%;
        border: 2px dashed black;
    }                                                                                                                                                                                                            
</style>
</head>
<body>
    <h1>The map</h1>
    <div id="map"></div>
</body>
</html>

References:

  • 1
    this is the way to go. – George Silva Oct 27 '15 at 17:29
1

Warning! After cross-browser-testing I found out that my answer below only worked for me in Chrome and not in Firefox


I had the same problem and fixed this with display:table on a the main div and display table-cell on each div thanks to this answer on stackoverflow:

<div class="container body-container">

  <div class="col-md-6 side-container">
    <p>some stuff to</p>
    <p>fill the</p>
    <p>first colum</p>      
  </div><!-- /other column -->
  <div class="col-md-6 side-container">
    <div id="map"></div>
  </div><!-- /leaflet column -->
</div><!-- /container -->

And the css:

.body-container {
    display: table;
}
.side-container {
  float: none;
  display: table-cell;
  height:0;
}
#map {
    height: 100%;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.