Question

所有

我正在开发一个包含非常“高”形式的Web应用程序。（高，这意味着它比典型的屏幕高几百％。）

该设计需要一个固定在屏幕底部的“页脚”，无论用户在表单中的位置如何，都始终可见。

换句话说，无论用户是在表单的顶部，中间还是底部附近，页脚都应该是可见的，并且表单应该在其下面滚动。

为了实现这一点，我已将页脚创建为包含position:fixed和bottom:0的div。

这适用于我测试过的所有浏览器，包括iOS5上的Safari。

除了 ONE 错误...

如果用户位于表单顶部附近，并将焦点放在其中一个文本字段上 - 正如预期的那样，iOS会显示键盘。

每次用户点击下一步按钮，iOS都会将她“标记”到下一个字段。

当她通过反复点击下一步向下进入表单时，iOS会自动“向上滚动”表单，因此她在表单上的位置仍然在视图中。

但是，iOS似乎没有更新position:fixed页脚div的位置 - 它会错误地向上滚动以及表单的其余部分。

如果用户取消键盘，div将恢复到“正确”的位置，因此这不是一个不可恢复的错误。但是，页脚移动的事实是一个明显的问题。

这是iOS实施position:fixed的错误还是缺点？或者，有什么我做错了吗？

非常感谢提前！

[UPDATE]

Remy Sharp（恰当的名字）刚刚在iOS / Safari上撰写了一篇关于position:fixed的各种错误和问题的精彩而详细的帖子：http://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling-on-ios/。如果您正在考虑在针对iOS用户的网站上使用position:fixed，那么这是必读的...

Answer 1

我知道早期版本的iOS最初并不支持position:fixed，我知道iOS5确实支持它，但我过去曾遇到过它的问题。如果您的页脚是某种控制栏，那么我建议使用CSS粘性页脚，然后所有页面/内容都可以加载到div之上。

Answer 2

您使用的是jQuery吗？如果是这样，我怀疑像这样的工作有效：

$(":input").focus( function() {
  $(window).scrollTop( $(window).scrollTop() + 1 );
});

通过在聚焦新表单元素后滚动页面1px，应该重置固定元素的底部属性。

Answer 3

这是修复，没有页脚跳到你身上。

首先将标题和正文/部分包装在div中。使该div可滚动。
比你绝对地定位页脚和位置相对于其他一切。
添加固定高度。

看到它在这里工作，http://yinnetteolivo.com/footerbottom.html

您的欢迎：）

Answer 4

我发现这个错误的其他答案都没有对我有用。我能够通过将页面向上滚动34px来修复它，移动数据库的数量会向下滚动。用jquery：

$('.search-form').on('focusin', function(){
    $(window).scrollTop($(window).scrollTop() + 34);
});

这显然会在所有浏览器中生效，但它可以防止它在iOS中崩溃。

iOS5（Safari）的一个错误，“位置：固定”div和高大的形式

4 个答案: