title: Jquery Mobile - Adding a responsive Leaflet map to page content
body: <p>I need to make a Leaflet map fit inside a JQM page that also includes a header. The problem is that the page is scrollable and I can't see the bottom of the map without scrolling. I need the whole page to fit the window size, without any scrolling.</p>
  
  <p>Here is what I have so far:</p>
  
  <p><a href="http://jsfiddle.net/51Lv7ppt/" rel="nofollow">http://jsfiddle.net/51Lv7ppt/</a></p>
  
  <pre><code>&lt;body&gt;
      &lt;div data-role="page" id="mapPage" data-theme="a"&gt; 
          &lt;div data-role="header" data-position="fixed" data-theme="a"&gt;
              &lt;a id="backButton" href="#" data-rel="back" 
                  data-transition="slide" data-direction="reverse"&gt;Back&lt;/a&gt;
              &lt;h1&gt;Map&lt;/h1&gt;
          &lt;/div&gt; 
  
          &lt;div id="map-content" data-role="content"&gt;
              &lt;div id="map"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;a id="curLoc" data-role="button" data-icon="location" data-iconpos="notext"&gt;&lt;/a&gt;
  
      &lt;/div&gt; 
  &lt;/body&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>#mapPage, #map {
    height: 100%;
  }
  
  #map-content{
    height: 100%;
    padding: 0px; 
    margin:0px;
    z-index: -1;
  }
  #curLoc{
    position: absolute;
    bottom: 0;
    left: 10px;
  }
  </code></pre>