html - 粘性页脚在手机屏幕上跳起来

Question

在我的网络应用程序中，我有一个适用于小屏幕的粘性页脚。问题是粘性页脚会根据键盘的状态上下跳动。

我正在寻找它被移动键盘覆盖。这是粘性页脚的 CSS

width: 100%;
position: fixed;
bottom: 0;
height: 85px;
left: 0;
right: 0;

有什么解决方法吗？

Answer 1

对于较小的/触摸屏，最好使用固定的以外的东西，因为您将不得不考虑许多不同的问题。这个键盘问题是一个问题，将设备转到 viewport: landscape 是另一个问题。它还可能导致滚动出现问题，因为触摸设备在滚动完成之前不会呈现某些内容(这意味着元素可能会根据用户滑动手指滚动的速度而做出不同的 react )。最好创建一个在大多数情况下都可靠的站点，而不必弄清楚并考虑所有不同的可能情况。

即使对于“桌面”设备，如果您可以在没有固定定位的情况下做某事，那就去做吧。在这些情况下，使用固定定位与其说是最佳实践，不如说是一种捷径。

有多种方法可以在不使用固定定位的情况下创建“粘性”页脚，这将有助于优化您的网站以在大多数设备上获得最佳观看体验。如果你用谷歌搜索“sticky footer”，你会发现很多不错的选择。一些在下面。

• Ryan Fait's CSS Sticky Footer
• CSS-Tricks sticky footer
• Bootstrap sticky footer example