修正了iPhone和iPad上Chrome浏览器重启时页脚div消失的问题。

Question

因此，我有一个问题一直困扰我几个小时，这是iPhone和iPad上的Google Chrome浏览器所特有的。我在下面做了一个简化的代码示例。我一直在寻找如何处理这个问题。我正在开发一个网站，用户可以在浏览器标签页中保持活跃。该网站有一个固定的页脚，停留在视口的底部。在网站的初始加载时，固定的页脚出现在视口的底部。如果您滑动关闭或最小化 Chrome 应用程序，那么下次重新启动它时，页脚现在已经被推到了视口下方，您必须向下滚动以使其可见。我认为标签和地址栏的高度与此有关。我想如果一个div的位置固定在底部，它就会保持在那里。那么是什么原因会导致它第一次正常加载，然后在重新启动Chrome浏览器时，窗口还没有调整大小，就被推倒了呢？这段代码在普通的桌面上或在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链接。

https:/codepen.iorodneystoverpenmdVdNJy。

Answer 1

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