粘性页脚在手机屏幕上跳起来
Sticky footer jumps up on mobile screen
在我的网络应用程序中,我有一个适用于小屏幕的粘性页脚。问题是粘性页脚会根据键盘的状态上下跳动。
我正在寻找它被移动键盘覆盖。这是粘性页脚的 css
width: 100%;
position: fixed;
bottom: 0;
height: 85px;
left: 0;
right: 0;
有什么解决方法吗?
最好使用固定的 smaller/touch 屏幕以外的东西,因为您将不得不考虑许多不同的问题。这个键盘问题是一个,将设备转到 viewport: landscape
是另一个。它还可能导致滚动出现问题,因为触摸设备在滚动完成之前不会呈现某些内容(这意味着元素可能会根据用户滑动手指滚动的速度而做出不同的反应)。最好建立一个大部分时间都可靠的网站,而不是必须弄清楚并考虑所有不同的可能情况。
即使是 "desktop" 设备,如果你可以在没有固定定位的情况下做某事,那就去做吧。在这些情况下,使用固定定位与其说是最佳实践,不如说是一种捷径。
有多种方法可以在不使用固定定位的情况下创建 "sticky" 页脚,这将有助于优化您的网站以在大多数设备上获得最佳观看体验。如果您 google 'sticky footer',您会发现许多不错的选择。下面是一些。
在我的网络应用程序中,我有一个适用于小屏幕的粘性页脚。问题是粘性页脚会根据键盘的状态上下跳动。
我正在寻找它被移动键盘覆盖。这是粘性页脚的 css
width: 100%;
position: fixed;
bottom: 0;
height: 85px;
left: 0;
right: 0;
有什么解决方法吗?
最好使用固定的 smaller/touch 屏幕以外的东西,因为您将不得不考虑许多不同的问题。这个键盘问题是一个,将设备转到 viewport: landscape
是另一个。它还可能导致滚动出现问题,因为触摸设备在滚动完成之前不会呈现某些内容(这意味着元素可能会根据用户滑动手指滚动的速度而做出不同的反应)。最好建立一个大部分时间都可靠的网站,而不是必须弄清楚并考虑所有不同的可能情况。
即使是 "desktop" 设备,如果你可以在没有固定定位的情况下做某事,那就去做吧。在这些情况下,使用固定定位与其说是最佳实践,不如说是一种捷径。
有多种方法可以在不使用固定定位的情况下创建 "sticky" 页脚,这将有助于优化您的网站以在大多数设备上获得最佳观看体验。如果您 google 'sticky footer',您会发现许多不错的选择。下面是一些。