标题重写为：在移动浏览器中，CSS3的100vh值并非固定不变的
<p>我有一个非常奇怪的问题...在我遇到的每个浏览器和移动版本中，都出现了这种行为：</p>
<ul>
<li>加载页面时，所有浏览器都有一个顶部菜单（例如显示地址栏），当你开始滚动页面时，它会向上滑动。</li>
<li>有时，100vh只在视口的可见部分上计算，所以当浏览器栏向上滑动时，100vh会增加（以像素为单位）</li>
<li>所有布局都会重新绘制和重新调整，因为尺寸已经改变</li>
<li>对用户体验来说，效果不好</li>
</ul>
<p>如何避免这个问题？当我第一次听说视口高度时，我很兴奋，我以为我可以用它来代替使用JavaScript来设置固定高度的块，但现在我认为唯一的方法实际上是使用JavaScript和一些调整大小的事件...</p>
<p>你可以在这里看到问题：示例网站</p>
<p>有人可以帮我解决/提供一个CSS解决方案吗？</p>
<hr />
<p>简单的测试代码：</p>
<p><br /></p>
<pre class="brush:js;toolbar:false;">/* 可能我可以追踪问题发生的时候... */
$(function(){
var resized = -1;
$(window).resize(function(){
$('#currenth').val( $('.vhbox').eq(1).height() );
if (++resized) $('#currenth').css('background:#00c');
})
.resize();
})</pre>
<pre class="brush:css;toolbar:false;">*{ margin:0; padding:0; }
/*
这是一个应该保持高度不变的盒子...
使用min-height允许内容超过视口的高度，如果文本太多
*/
.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;
}</pre>
<pre class="brush:html;toolbar:false;"><div class="vhbox" style="background-color:#c00">
<div class="t"><div class="c">
这个div的高度应该是视口的100％，并在滚动页面时保持这个高度
<br>
<!-- 如果调整大小事件被触发，这个输入框会高亮显示 -->
<input type="text" id="currenth">
</div></div>
</div>
<div class="vhbox" style="background-color:#0c0">
<div class="t"><div class="c">
这个div的高度应该是视口的100％，并在滚动页面时保持这个高度
</div></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script></pre>
<p><br /></p>
