Question

I have a project with jQuery Mobile + phonegap and I have some issues with the footer and content div.

A basic jQuery Mobile page looks like this:

<div data-role="page" data-theme="b" id="map">

    <div data-role="header" data-theme="b" data-position="inline">
        <a href="#" data-rel="back" data-icon="arrow-l">Back</a>
        <h1>MAP</h1>
    </div><!-- /header -->

    <div data-role="content" id="map_canvas">
    </div><!-- /content -->

    <div data-role="footer" data-theme="d">
        <h4>TEST</h4>
    </div><!-- /footer -->
</div><!-- /page -->

Now I’m trying to load google maps in the content so I use this in JavaScript:

$('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); 
}

And this is the result:

The problem is that the footer doesn’t stick to the bottom unless you specify the attribute data-position="fixed" like this:

<div data-role="footer" data-theme="d" data-position="fixed">
    <h4>TEST</h4>
</div><!-- /footer -->

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:

Where you can see the map only using the space left before it’s moved to the bottom.

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?

Answer 1

You don’t need to wait for an event, you need to set the .ui-content element’s height to something around 100%.

Here is a purely CSS method of achieving 100% height for a jQuery Mobile pseudo-page:

/*make sure the viewport is 100% height*/
html, body {
    height : 100%;
}

/*make the page element 100% height*/
#map-page {
    height : 100%;
}

/*specify a height for the header so we can line-up the elements, the default is 40px*/
#map-page .ui-header {
    height : 40px;
}

/*set the content to be full-width and height except it doesn't overlap the header or footer*/
#map-page .ui-content {
    position : absolute;
    top      : 40px;
    right    : 0;
    bottom   : 30px;
    left     : 0;
}

/*absolutely position the footer to the bottom of the page*/
#map-page .ui-footer {
    position : absolute;
    bottom   : 0;
    left     : 0;
    width    : 100%;
    height   : 30px;
}​

Here is a demo: http://jsfiddle.net/jasper/J9uf5/2/