Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

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
2  
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

3 Answers 3

up vote 2 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

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.