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>
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.
[2021 UPDATE]
As of 2021/01/13 Flexbox has 97% browser support and is a great option for making Leaflet responsive using the flex-grow property.
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="main">
<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%;
}
#frame{
height: 100%;
}
.fill
{
min-height: 100%;
height: 100%;
width: 100%;
max-width: 100%;
}
.container{
max-width: 60em;
padding: 0.2em;
}
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.
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>
This related question of Stackoverflow: Percentage Height HTML 5/CSS
You also can give a look to the W3C CSS 2.1 standard to see the box model and the part about computing heights and margins
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%;
}
Not trying to steal any of Tristan Forward's thunder, but their demo was a bit confusing for me. I've boiled down the CSS below to the parts that are actually controlling the appearance of the header and the map within the root-container div.
.root-container {
height: 100vh;
display: flex;
flex-direction: column;
}
.header {
flex: 0 0 auto;
}
.leaflet-container{
height:100%;
}
