我有一个很奇怪的问题…在每个浏览器和手机版本中，我都遇到了这种行为:
当你加载页面时，所有的浏览器都有一个顶部菜单(例如显示地址栏)，当你开始滚动页面时，它会向上滑动。
100vh有时只在视口的可见部分计算，所以当浏览器栏向上滑动时，100vh增加(以像素计算)。
所有布局重新油漆和重新调整，因为尺寸已经改变
对用户体验有不好的跳跃效果
如何避免这个问题?当我第一次听说viewport-height时，我很兴奋，我认为我可以使用它来固定高度块，而不是使用javascript，但现在我认为唯一的方法实际上是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>
我刚刚发现我设计的一个web应用程序在iphone和ipad上有这个问题，并发现一篇文章建议使用针对特定苹果设备的媒体查询来解决这个问题。
我不知道是否可以在这里分享那篇文章中的代码，但是地址是:http://webdesignerwall.com/tutorials/css-fix-for-ios-vh-unit-bug
引用这篇文章:“使用针对旧版本iPhone和iPad分辨率的媒体查询，将元素高度与设备高度匹配。”
他们只添加了6个媒体查询来适应全高度元素，它应该可以工作，因为它是完全由CSS实现的。
编辑等待:我现在无法测试它，但我会回来报告我的结果。
在移动设备上使用vh不适合100vh，因为他们的设计选择使用整个设备的高度，不包括任何地址栏等。
如果你正在寻找一个布局，包括div高度成比例的真实视图高度，我使用以下纯css解决方案:
:root {
--devHeight: 86vh; //*This value changes
}
.div{
height: calc(var(--devHeight)*0.10); //change multiplier to suit required height
}
你有两个选项来设置视口高度，手动设置——devHeight为一个工作的高度(但是你需要为你正在编码的每种类型的设备输入这个值)
or
使用javascript获取窗口高度，然后在加载和刷新视口时更新——devheight(然而这需要使用javascript，不是一个纯css解决方案)
一旦你获得正确的视图高度，你可以创建多个div在总视口高度的确切百分比，只需改变乘数在每个div你分配的高度。
0.10 =视图高度的10%
0.57 =视图高度的57%
希望这可以帮助到一些人;)
不要使用推荐的方法，如-webkit-fill-available。
我花了一整天的时间来修复这个“bug”。
当你的应用程序被一个带有“下巴”的浏览器加载时，添加一个类。
JavaScript
// Angular example but applicable for any JS solution
@HostBinding('class.browser-has-chin') browserHasChin: boolean = false;
public ngOnInit(): void {
this.browserHasChin = this._isMobileSafari();
}
private _isMobileSafari() {
return navigator.userAgent.match(/(iPod|iPhone|iPad)/) && navigator.userAgent.match(/AppleWebKit/) ? true : false;
}
CSS
.browser-has-chin {
@media screen and (max-device-width: 767px){
// offset with padding or something
}
}
注:
在跨浏览器兼容性方面，-webkit-fill-available道具存在一些重大问题。
我能够让它在Chrome和iOS Safari中工作，以修复下巴/高度计算问题。然而，它破坏了Android Chrome和Firefox也有bug。
似乎-webkit-fill-available在某种程度上是匆忙加入webkit的，也许是苹果偶然采用的，作为下巴/高度计算的修复?
它依赖于内在的大小，这是不安全的使用。
我在下面创建了两个例子:
要展示如何高度:100vh的高度可以导致滚动在移动chrome浏览器:
代码:https://codesandbox.io/embed/mobile-viewport-100vh-issue-nxx8z?fontsize=14&hidenavigation=1&theme=dark
演示:https://nxx8z.csb.app/
解决方案使用位置:固定解决问题和纯CSS:
代码:https://codesandbox.io/s/mobile-viewport-100vh-issue-fix-forked-ypx5x?file=/index.html
演示:https://ypx5x.csb.app/
