我有一个非常奇怪的问题……在每个浏览器和移动版本中，我都遇到了以下问题：

• 加载页面时，所有浏览器都有一个顶部菜单（例如，显示地址栏），当您开始滚动页面时，该菜单会向上滑动。
• 有时 仅在视口的可见部分计算100vh ，因此当浏览器栏向上滑动时100vh会增加（以像素为单位）
• 由于尺寸已更改，所有布局都会重新绘制和重新调整
• 对用户体验的不良影响

如何避免这个问题？当我第一次听说viewport-height时，我很兴奋，我以为可以将其用于固定高度块而不是使用javascript，但是现在我认为唯一的方法实际上是带有一些resize事件的javascript
…

谁能帮我/建议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 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;

}


<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>