具有相对高度的元素在滚动时更改高度/跳跃（移动设备）答案

【问题标题】：Element with relative height changes height/jumps on scroll (mobile)具有相对高度的元素在滚动时更改高度/跳跃（移动设备）
【发布时间】：2016-12-21 04:57:04
【问题描述】：

如下图所示，.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;

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

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

【问题讨论】：

这个padding: .1px;真的有必要吗？在没有它的情况下测试您的页面。
当我遇到边距折叠问题时遗留下来的，这最初解决了它。

标签： html css svg layout height

【解决方案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');

我知道这是一篇旧帖子，但我自己也遇到过同样的问题，希望这对遇到此问题的其他人有所帮助:)

【讨论】：

【解决方案2】：

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

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

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

【讨论】：