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

Question

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

代码笔链接：

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

Answer 1

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