将内容保持在 Mobile Safari iOS 8 的底部栏上方 [重复]

Question

我知道 iOS8 不再支持最小用户界面。但是，我有一些内容固定在网页的底部。

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

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

Answer 1

一种解决方案可能是为具有 100vh 的元素提供更多的 padding-bottom，以便为 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 上的该规则。