修复了页脚 div 在 Chrome 浏览器在 iPhone 和 iPad 重新启动时消失的问题

Question

所以我有一个问题已经困扰我好几个小时了，它是 iPhone 和 iPad 上的 Google Chrome 浏览器特有的。我在下面做了一个简化的代码示例。我一直在无休止地寻找如何处理这个问题。我正在开发一个网站，用户可以在浏览器选项卡中保持活动状态。该网站有一个固定的页脚，位于视口的底部。初始加载网站时，固定页脚会按原样出现在视口底部。如果您滑动以关闭或最小化 Chrome 应用程序，那么下次您重新启动它时，页脚现在已被推到视口下方，您必须向下滚动才能使其可见。我假设选项卡和地址栏的高度与它有关。我想如果 div 固定在底部，它会留在那里。那么什么会导致它第一次正确加载然后在重新启动 Chrome 时 window 未调整大小时被推下？该代码在常规桌面上或在 iPhone 或 iPad 上使用 Safari 浏览器都没有问题，但同样它在顶部也没有选项卡。可能会有 jquery 或 css 计算解决方案吗？

CSS 样式 & HTML

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#wrapper {
   height: 100vh;
}
.header {
   background:#ff0;
   padding:10px;
}
.body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
.footer {
   position:fixed;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}

<div id="wrapper">
    <div class="header"></div>
    <div class="body"></div>
    <div class="footer"></div>
</div>

Codepen link:

https://codepen.io/rodneystover/pen/mdVdNJy

Answer 1

感谢 deblocker 的评论发现了这个问题的答案。通过从 #wrapper div 中完全移除高度属性，页脚现在保持在正确的位置。

修复了页脚 div 在 Chrome 浏览器在 iPhone 和 iPad 重新启动时消失的问题

Fixed footer div disappearing on Chrome browser relaunch on iPhone and iPad

javascript

html

jquery

css

jquery-mobile