title: Content using all available space with jQuery Mobile
body: <p>I have a project with jQuery Mobile + phonegap and I have some issues with the footer and content div.</p>
  
  <p>A basic jQuery Mobile page looks like this:</p>
  
  <pre><code>&lt;div data-role="page" data-theme="b" id="map"&gt;
  
      &lt;div data-role="header" data-theme="b" data-position="inline"&gt;
          &lt;a href="#" data-rel="back" data-icon="arrow-l"&gt;Back&lt;/a&gt;
          &lt;h1&gt;MAP&lt;/h1&gt;
      &lt;/div&gt;&lt;!-- /header --&gt;
  
      &lt;div data-role="content" id="map_canvas"&gt;
      &lt;/div&gt;&lt;!-- /content --&gt;
  
      &lt;div data-role="footer" data-theme="d"&gt;
          &lt;h4&gt;TEST&lt;/h4&gt;
      &lt;/div&gt;&lt;!-- /footer --&gt;
  &lt;/div&gt;&lt;!-- /page --&gt;
  </code></pre>
  
  <p>Now I'm trying to load google maps in the content so I use this in JavaScript:</p>
  
  <pre><code>$('div').live("pageshow", function()
  {
      var myOptions = {
        center: new google.maps.LatLng(-34.397, 150.644),
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      map = new google.maps.Map(document.getElementById("map_canvas"),
          myOptions); 
  }
  </code></pre>
  
  <p>And this is the result:</p>
  
  <p><img src="https://i.stack.imgur.com/AnQlu.png" alt="Page with footer after content"></p>
  
  <p>The problem is that the footer doesn't stick to the bottom unless you specify the attribute <code>data-position="fixed"</code> like this:</p>
  
  <pre><code>&lt;div data-role="footer" data-theme="d" data-position="fixed"&gt;
      &lt;h4&gt;TEST&lt;/h4&gt;
  &lt;/div&gt;&lt;!-- /footer --&gt;
  </code></pre>
  
  <p>That's fine but the problem is the map is loading before jquery mobile take the footer to the bottom, as a result I have this page:</p>
  
  <p><img src="https://i.stack.imgur.com/q6hUp.png" alt="Page with footer fixed"></p>
  
  <p>Where you can see the map only using the space left before it's moved to the bottom.</p>
  
  <p>My question is.. what event should I wait for or what do I need to add to my code in order to load the map so it will use all the space between header and footer?</p>