我有一个非常奇怪的问题……在每个浏览器和移动版本中，我都遇到了以下问题：
- 加载页面时，所有浏览器都有一个顶部菜单（例如，显示地址栏），当您开始滚动页面时，该菜单会向上滑动。
- 有时仅在视口的可见部分计算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>
您可以尝试将
position: fixed; top: 0; bottom: 0;属性赋予容器。