CODEWITHSUNDEEP
cssjquery-mobile
Charles Bandes
Charles Bandes

Reputation: 795

Set height relative to other elements

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...)

Upvotes: 0

Views: 5045

Answers (3)

Gábor Imre
Gábor Imre

Reputation: 6299

You can use height: calc(100% - 50px) in modern browsers.

Upvotes: 1

DocileWalnut
DocileWalnut

Reputation: 271

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.

Upvotes: 0

cocoahero
cocoahero

Reputation: 1302

You could use javascript, or you could use relative heights. For example, set your header's height to say, 10%, the footer to 20%, and then you could set your map's height to 70%.

Upvotes: 0

Related Questions