This specific html code was created utilizing jQuery mobile.
<div data-role="page" id="map-page">
<div data-role="header" data-theme="a" data-position="fixed"
data-fullscreen="true" data-tap-toggle="false">
<h1>header</h1>
</div>
<div data-role="main" class="ui-content" id="map_canvas">
<div id="map"></div>
</div>
<div data-role="footer" data-theme="a" data-position="fixed"
data-fullscreen="true" data-tap-toggle="false">
<h1>footer</h1>
</div>
The google map is represented by the id=map, and also this includes CSS styles.
<style>
#map-page{
width: 100%;
height: 100%;
padding: 0;
}
#map-canvas{
position: relative;
overflow: hidden;
min-height:100%;
height:auto !important;
}
#map{
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
}
</style>
In the current setup, the google map fills all the space below the header and above the footer. The result is that the top and bottom of the map are partly obscured by the header and footer. Ideally, I would like the map to only cover the remaining area between the header and footer. Any suggestions on how to achieve this?
Appreciate any assistance.