CODEWITHSUNDEEP
csstwitter-bootstrapdictionaryleaflet
L.fcg
L.fcg

Reputation: 167

How to fit a leaflet map under a bootsrap nav header?

I'm using bootstrap in combination with a leaflet map. Now to give the map full height of the window I used $("#map").height($(window).height()); But I have a nav header at the top of the page. This is the html of the bootstrap nav bar:

  <nav class="navbar navbar-light bg-faded">
        <a class="navbar-brand" href="#"><img id="logo" src="images/logo.png"></a>
  </nav>

This is my map div:

<div class="col-md-9 col-sm-8 col-xs-8" id="map"></div>

Now when I load the page I get a scrollbar at the side because the map takes the full window height + the height of the nav bar. Is there a way to solve this? Can I add something to the css of the nav bar so the map will be behind it?

UPDATE:

After I implemented you'r suggestion @IvanSanchez, the map got real thin like this: enter image description here

UPDATE

When I add the css with pixels like this it works and the thin map changes into a 600px height:

#map {
    display : table-cell;
    height : 800px;
    /*height: calc ( 100vh - 5em );*/
}

But I want it to be responsive so I need it in % or like @IvanSanchez suggested it.

Upvotes: 0

Views: 2114

Answers (1)

IvanSanchez
IvanSanchez

Reputation: 19079

Now to give the map full height of the window I used $("#map").height($(window).height());

Don't.

If you want to fit stuff to the viewport size, use the vh, vw, vmin and vmax CSS units.

If you cannot use absolutely positioned block elements to control the size of the map container, then use calc like #map { height: calc ( 100vh - 5em ); }

Upvotes: 1

Related Questions