title: CSS3 100vh not constant in mobile browser
body: <p>I have a very odd issue... in every browser and mobile version I encountered this behavior:</p>
  
  <ul>
  <li>all the browsers have a top menu when you load the page (showing the address bar for example) which slide up when you start scrolling the page.</li>
  <li>100vh <em>sometimes</em> is calculated only on the visible part of a viewport, so when the browser bar slide up 100vh increases (in terms of pixels)</li>
  <li>all layout re-paint and re-adjust since the dimensions have changed</li>
  <li>a bad jumpy effect for user experience</li>
  </ul>
  
  <p>How can avoid this problem? When I first heard of viewport-height I was excited and I thought I could use it for fixed height blocks instead of using javascript, but now I think the only way to do that is in fact javascript with some resize event...</p>
  
  <p>you can see the problem at: <a href="http://alphafitness.altervista.org/log.php" rel="noreferrer">sample site</a></p>
  
  <p>Can anyone help me with / suggest a CSS solution?</p>
  
  <hr>
  
  <p>simple test code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>/* maybe i can track the issue whe it occours... */
  $(function(){
    var resized = -1;
    $(window).resize(function(){
      $('#currenth').val( $('.vhbox').eq(1).height() );
      if (++resized) $('#currenth').css('background:#00c');
    })
    .resize();
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>*{ margin:0; padding:0; }
  
  /*
    this is the box which should keep constant the height...
    min-height to allow content to be taller than viewport if too much text
  */
  .vhbox{
    min-height:100vh;
    position:relative;
  }
  
  .vhbox .t{
    display:table;
    position:relative;
    width:100%;
    height:100vh;
  }
  
  .vhbox .c{
    height:100%;
    display:table-cell;
    vertical-align:middle;
    text-align:center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="vhbox" style="background-color:#c00"&gt;
    &lt;div class="t"&gt;&lt;div class="c"&gt;
    this div height should be 100% of viewport and keep this height when scrolling page
      &lt;br&gt;
      &lt;!-- this input highlight if resize event is fired --&gt;
      &lt;input type="text" id="currenth"&gt;
    &lt;/div&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="vhbox" style="background-color:#0c0"&gt;
    &lt;div class="t"&gt;&lt;div class="c"&gt;
    this div height should be 100% of viewport and keep this height when scrolling page
    &lt;/div&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>