How can I display a full screen google map with jQuery Mobile?

Question

The following code displays strange output. I should see a full screen mobile map. But for some reason it shows on just a portion of the screen. I am using jquery.ui

Answer 1

Header and footer are unavoidable if you're using jQuery. I set {data-position="fixed" data-fullscreen="true"} for both header and footer, and set html { height: 100% } body { height: 100%; margin: 0; } #map { position:absolute; width: 100%; height: 100%; padding: 0; } as well, so that both the menu and the map perfectly work together on the mobile device.