JQuery Mobile layout issue

[SteveCole]

I've made a mobile centric version of my application using Jquery Mobile as my UI (direct link here) and I'm having an annoying issue with the map's Div. The app has three pages and each page does have a header that is fixed in terms of its positioning. The map page has a footer and it also has fixed positioning.

The problem is that, at least on my iPhone, the map div's content can scroll underneath the header of the page making the zoom buttons inaccessible. How do I prevent this from happening?

Mobile being mobile, I know that I need to adapt to screen sizes and orientations. During the intial page load, I evaluate the user's screen to adjust the map page's header,footer, and content height:

 $(document).ready(function() { 
  headerHeight = $('#mapHeader').height();
  footerHeight = $('#mapFooter').height() + 5;
  
  mapHeight = $(window).height() - headerHeight - footerHeight;     
  $('#map').height(mapHeight);
  map.resize();   
 });

I have the same basic code to account for orientation changes:

 $( window ).on( "orientationchange", function( event ) {
  headerHeight = $('#mapHeader').height();
  footerHeight = $('#mapFooter').height() + 5;
  
  console.info('Header Height: ' + headerHeight);
  console.info('Footer Height: ' + footerHeight);

  mapHeight = $(window).height() - headerHeight - footerHeight;     
  $('#map').height(mapHeight);
  
  if ($.mobile.activePage.attr('id') == "mapPage") {
   map.resize();
  }
 }); 

I also read about touchmove in my web searches so I threw this in my code for good measure:

 $('#mapPage').delegate('.ui-content', 'touchmove', false);

Didn't seem to make any difference. Anyone have any tips?

Thanks!
Steve