title: Set height relative to other elements
body: <p>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. </p>
  
  <p>So I have: </p>
  
  <p>header (let's say it's 30px tall)
  footer (let's say it's 20px tall)</p>
  
  <p>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...) </p>