Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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>
share|improve this question
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
up vote 9 down vote accepted

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.

share|improve this answer

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.

share|improve this answer

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:

share|improve this answer
1  
this is the way to go. – George Oct 27 '15 at 17:29

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;
}
share|improve this answer
    
worked for me. actually the best answer at all – g07kore Jun 17 at 21:29

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%;
}
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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