title: how to get the exact height of header in jquery mobile
body: <p>I'm new to JQM and I want to get the exact height of a header, but I can't seem to get it accurately. I need this for an Iphone app which should detect the header's height even on iphone 4 with Retina display (or even IPad).</p>
  
  <p>My current test is:</p>
  
  <pre><code>&lt;div data-role="page" data-theme="m"&gt;
    &lt;div id="hdr" data-role="header"&gt;
      &lt;a id="bk" href="index.html" data-role="button"&gt;Back&lt;/a&gt;
      &lt;div style="margin:0 auto;text-align:center;"&gt;&lt;img src="../images/lgo_iph.png" alt="" /&gt;&lt;/div&gt;
      &lt;a href="index.html" data-role="button"&gt;Cancel&lt;/a&gt;
   &lt;/div&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p>and I get the height with:</p>
  
  <pre><code>$(document).live("pageshow", function(){
   alert($('#hdr').outerHeight(true));
   });
  </code></pre>
  
  <p>which alerts 22, which is not correct as if I substitute the $('#hdr') with $('#bk') I get 28 as height which should be smaller.</p>
  
  <p>Any help?</p>
  
  <p>Thank you.</p>