CSS3 100vh not constant in mobile browser
<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>