html – CSS3 100vh在移动浏览器中不变

>当您开始滚动页面时，当您加载页面(显示地址栏)时，所有浏览器都有顶部菜单。
> 100vh仅在视口的可见部分计算，所以当浏览器栏滑动100vh增加(以像素为单位)
>所有布局重新绘制并重新调整，因为尺寸已更改
>用户体验不好的跳跃效果

怎么可以避免这个问题？当我第一次听到viewport-height我很兴奋，我以为我可以使用它的固定高度块istead使用javascript，但现在我认为唯一的办法是事实上javascript与一些resize事件…

你可以看到这个问题：sample site

任何人可以帮助我/提出一个CSS解决方案？

简单测试代码：

/* 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();
})

*{ margin:0; padding:0; }

/*
  this is the box which sould 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;
}

<div class="vhbox" style="background-color:#c00">
  <div class="t"><div class="c">
  this div height should be 100% of viewport and keep this height when scrolling page
    <br>
    <!-- this input highlight if resize event is fired -->
    <input type="text" id="currenth">
  </div></div>
</div>

<div class="vhbox" style="background-color:#0c0">
  <div class="t"><div class="c">
  this div height should be 100% of viewport and keep this height when scrolling page
  </div></div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>