title: How can I position the elements within 100% height of the device on mobile
body: <p>For a hybrid application, i need to build the web part of the application.</p>
  
  <p>I defined that the html and body is 100% of the viewport.
  I thought this was a good idea, but it turns out that Android changes the viewport when the touch keyboard is showed. So it resizes all elements on the page. This is not the behaviour that I want. </p>
  
  <p>Is it possible to position and give dimensions on elements based on the device height, without interference from the touch keyboard?</p>
  
  <p>problem shows here <a href="http://betapreview.nl/playground/overflow-table/index2.html" rel="nofollow">http://betapreview.nl/playground/overflow-table/index2.html</a></p>
  
  <p><strong>What I did try already</strong><br></p>
  
  <p>option 1</p>
  
  <p><code>&lt;meta name="HandheldFriendly" content="True"&gt;
      &lt;meta name="MobileOptimized" content="320"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0; maximum-scale=1.0; user-scalable=no"&gt;</code></p>
  
  <p>example: <a href="http://betapreview.nl/playground/overflow-table/index2.html" rel="nofollow">http://betapreview.nl/playground/overflow-table/index2.html</a></p>
  
  <p>option 2</p>
  
  <pre><code>var theHeight = $(document).height();
  $("#wrapper").css("height", theHeight);
  </code></pre>
  
  <p>example: <a href="http://betapreview.nl/playground/overflow-table/index3.html" rel="nofollow">http://betapreview.nl/playground/overflow-table/index3.html</a></p>