html - 页脚下方的大空白显示在 iPhone 实际设备的某些页面上，但在 Chrome 中的模拟器上不显示

Question

我的网站有一个我根本无法解决的问题。基本上，在我包含通用页脚的几页(不是每一页)上，它下面有一个大的空白区域。我能够在 Chrome 开发工具中的 iPhone 模拟器上正确查看修复。但是，当我在实际的 iPhone 设备 Safari 浏览器上运行该页面时，页脚下方有一个巨大的空白区域。我已尽一切努力解决此问题，但我看不到任何解决方案。谁能帮忙？

下面是我如何包含 JSP:

<footer class="footer-container">
   <s:include value="/jsp/common/Footer.jsp" />
</footer>

这是页脚容器的 CSS 代码:

.footer-container {position:relative;}
.footer-container{height: 87px;}

Answer 1

终于找到了解决这个问题的方法。这将帮助您解决移动设备上的类似问题。

有一次，我添加了一个 css 类:

.navInActive
{                                                                      
-webkit-transform:translate3d(0px, 0, 0);
-moz-transform:translate3d(0px, 0, 0);
-ms-transform:translate3d(0px, 0, 0);
-ms-transform:translate(0px, 0);
-o-transform:translate3d(0px, 0, 0);
 transform:translate3d(0px, 0, 0);
 z-index: 0;-ms-transform:translate(0, 0);
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;transition: all 300ms ease;
}

问题已解决。所有在 iPhone Safari 上遇到此问题的人都可以尝试一下并告诉我。