将内容保留在Mobile Safari iOS 8的底部栏上方

Question

我知道iOS8不再支持minimal-ui。但是，我有一些内容固定在网页的底部。

页面高度设置为100vh以占据整个视口。底部的一些内容显示在底栏下方。因此，用户必须滚动才能看到该内容。

我希望所有内容都显示在底栏上方。实现这一目标的最佳方法是什么？

Answer 1

一种解决方案可能是在100vh的元素上添加一点填充底部，以便为iphone底栏留出一些空间。

只需使用此代码即可使用Safari定位手机：

@media screen and (max-width: 767px) {
    _::-webkit-full-page-media, _:future, :root .safari_only {
        padding-bottom: 65px; //resize 
    }
}

不要忘记将 .safari_only 类添加到要定位的元素中，例如：

<div class='safari_only'> This div will have a padding-bottom:65px in a mobile with Safari  </div>

一个细节：这也会对Android设备中的Safari浏览器产生影响，但幸运的是没有多少用户在Android设备上使用Safari，无论如何，如果你需要它，你可以使用另一个css规则在Android上覆盖该规则。