title: How to size a content div to cover the entire content area in jQuery Mobile
body: <p>I started a simple jQuery Mobile Page with a header and a content div. The content div should serve as a map container for openlayers. The map should fill up the entire screen, except for the header bar. </p>
  
  <p>Sizing the content div with a width/height of 100% didn't work (nothing was displayed), so I'm looking for a CSS approach to pixel-size the div or a relative-size workaround.</p>
  
  <p>Especially I like to know:</p>
  
  <ul>
  <li>How can I account for screen orientation changes (landscape/portrait)? </li>
  <li>How can I make my layout "height-elastic", i.e. resistant to the toggling of the browser's address bar?</li>
  </ul>
  
  <p>Here is my markup so far:</p>
  
  <pre><code>&lt;body&gt; 
  
  &lt;div data-role="page"&gt;
  
  &lt;div data-role="header"&gt;
      &lt;h1&gt;My Map&lt;/h1&gt;
  &lt;/div&gt;
  
  &lt;div id="mapcontainer"  data-role="content"&gt;
       &lt;!-- OpenLayers Map goes here --&gt;          
  &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>