具有相对高度的元素在滚动（移动）

Question

如下图所示，滚动浏览某个点时，.hero div的高度会发生变化（Chrome，Android 6.0.1）。

这是相关的css

.hero {
    height: 100%;
    width: 100%;
    padding: .1px;
    overflow: hidden;
    position: relative;
}

该图片是svg：

svg {
    height: 100px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;

之前我遇到过这个问题，更常见的是使用视口单位设置高度时。它在桌面浏览器上从来都不是问题（据我所知）并且对不同的移动浏览器有不同的影响。

我已经经历了许多不同的解决方案尝试（摆弄定位和显示属性，以各种方式包装元素，重新定位图像）但问题仍然存在，我不知道下一步该去哪里

Answer 1

这是一个古老的帖子，但是我解决此问题的一种方法是，通过使用jQuery（或纯JavaScript）在手机上将视图高度转换为像素来避免vh值随页面链接栏的变化出现/消失。

这是使用jQuery的可能解决方案：

h = document.documentElement.clientHeight * 0.65;
h = (h*21)/100 //calculate percent here, in this example 21%
$('#ID').css('minHeight', h+'px');

我知道这是一篇过时的文章，但是我自己也遇到过同样的问题，希望这对遇到此问题的其他人有所帮助：）

Answer 2

想出这是因为在移动设备上滚动Chrome时地址栏隐藏/显示。视口实际上会在发生这种情况时调整大小，导致相对于视口的任何大小都会跳转。

编辑：解决方法是使用JS设置高度：

var windowHeight = window.innerHeight;
windowHeight += 'px';
console.log(windowHeight);
var hero = document.getElementById('hero');
hero.style.height = windowHeight;