Question

I’m working on a google map page for a jquerymobile site. I’ve got the map behaving as I’d like, and it displays beautifully, but the map element is too big – I can’t figure out how to scale it to fill all the available space between the header and footer.

So I have:

header (let’s say it’s 30px tall)
footer (let’s say it’s 20px tall)

Since there are so many different screen sizes for mobile devices right now, I want the map_canvas to be device-height minus 50px tall. Can I do this in css, or do I need to use javascript? (Not averse to that, but it would be great to use pure css…)

Answer 1

Due to general viewport wonkyness, auto-height is a slippery issue and not implemented reliably.

I’ve needed to implement something similar before on my mobile sites, and I found this article on Quirksmode to be infinitely useful – http://www.quirksmode.org/mobile/viewports.html

In your case, you’d want the height to be
document.documentElement.offsetHeight - (header.outerHeight() + footer.outerHeight())

or if you want to hardcode, document.documentElement.offsetHeight - 50. Of course hard-coding the value is a less maintainable way to go.