1

I'm trying to create a fullscreen map with leaflet and a purecss horizontal menu on top of it. Here is a solution for making the map height 100% (set parent elements also to 100% height). So right now, I've got something like this:

<!-- Menu -->
<div class="pure-menu pure-menu-horizontal">
    <a href="#" class="pure-menu-heading pure-menu-link">map</a>
    <ul class="pure-menu-list">
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">About</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Contact</a></li>
    </ul>
</div>

<!-- Map -->
<div id="map"></div>

CSS

body {
    padding: 0;
    margin: 0;
}

html, body, #map {
    height: 100%;
    width: 100%;
}

The problem is: the page height ist 100% + the height of the menu. So parts of the map get cut off at the bottom. I used Firefox' Inspector and changed various CSS settings to no avail. I also tested different browsers to exclude a problem with Firefox. What am I missing? Unfortunately I'm not a CSS guy..

I created a JSFiddle: http://jsfiddle.net/jygzLf3v/13/

The result window is scrollable for the height of the menu but should be "fullscreen" including the menu. Thanks for some insight.

Community
  • 1
  • 1
duenni
  • 320
  • 1
  • 3
  • 21

2 Answers2

1

Sounds like you could use #map {height:calc(100% - $HEIGHT_OF_MENU);} on your map container to size things up properly, and not have any cutoff.Don't forget to add 'px' after your menu height.

snkashis
  • 2,951
  • 1
  • 18
  • 35
  • Menu height is given in em, so the height of the menu is not static ([link](https://github.com/yahoo/pure/blob/master/src/menus/css/menus-skin.css)). What looks good in my browser could be worse in yours? – duenni May 21 '15 at 10:42
  • I just realised calc() can calculate with em, too. Will give this a try. – duenni May 21 '15 at 10:55
  • Tested it. As soon as you don't use a standard font or standard font size in your browser this will break. :-/ – duenni May 21 '15 at 17:43
  • Are you not able to switch it to something more fixed/arbitrary? – snkashis May 21 '15 at 18:46
  • Yeah, since I only want a small menu with few buttons I consider giving up on purecss and use [EasyButton](https://github.com/CliffCloud/Leaflet.EasyButton) instead. But thanks anyway! – duenni May 21 '15 at 19:40
1

You cand simply add overflow: hidden to your body element, in the stylesheet.

http://jsfiddle.net/jygzLf3v/14/

Alexandru Pufan
  • 1,842
  • 3
  • 26
  • 44
  • This will still cutoff the map. I did not mention it but I have a ZoomControl in the bottom left position which also will get cut off. http://jsfiddle.net/jygzLf3v/15/ – duenni May 21 '15 at 10:27