“position:fixed;bottom:0;”在iPhone上无效。

Question

似乎iPhone不支持css属性"position:fixed"，有没有好的解决方法？我查看了各种JavaScript/jQuery解决方案，可以垂直滑动元素，但这不是最好的解决方法，我希望该元素固定在屏幕底部。

- Xavier

Answer 1

我建议您考虑使用http://jquerymobile.com来获得完整的解决方案。

但是，这里还有一个独立于库的解决方案（只是一个脚本）：
http://cubiq.org/iscroll

- Oscar Godson

---

谢谢你的留言，我尝试了iscroll，但说实话它并不是很好。 - Xavier

总的来说，没有一个很好。即使是 Gmail 的也很糟糕，他们最终将其删除并使用那个浮动面板代替。虽然很糟糕，但这是事实。我还建议尝试：http://developer.yahoo.com/yui/3/scrollview/ - Oscar Godson

因此，我测试了iscroll解决方案，我可以说它是我在iPhone上能够得到的最接近固定位置的东西。 - Xavier

如果这是你采用的解决方案，请将其标记为正确，以便其他正在搜索的人可以轻松看到你选择了什么 :) 祝你的iPhone网站好运！就我个人而言，我也对此感到非常失望，因为我想制作具有iPhone外观的纯HTML5应用程序。 - Oscar Godson

@Oscar Godson，最终我选择了一些自定义的jQuery代码，但这是整个过程中最容易实现和使用的。顺便问一下，您是否了解媒体查询？ - Xavier

CSS媒体查询？当然可以！如果您在StackOverflow上详细说明，我可以尝试为您解答，或者您可以在Twitter上私信/推文给我@oscargodson。 - Oscar Godson

Answer 2

<div id="a"> 
  //your website content
</div>
<div id="b">
  //your fixed footer
</div>

• 将 b 的高度设置为所需的高度（CSS）
• 将 a 的高度设置为 screen.height - b.height（JS）
• 还要设置 overflow:scroll; 样式；

这种解决方案的缺点是您将不使用主窗口滚动条，但我认为 iPhone 上没有主窗口滚动条，所以...

- Kraz

---

在 iPhone 上，溢出滚动需要使用两根手指滚动。这是一个糟糕的用户界面设计，会影响到你页面的主要内容。 - Lily Ballard

Kevin Ballard的评论非常有帮助。这个用户界面对于用户来说是噩梦般的体验 - 大多数用户甚至不知道双指滚动的存在。 - ceejayoz

上帝啊，请不要使用双指滚动。说实话，我直到今年早些时候才知道你可以这样做。 - Oscar Godson

抱歉，我正在寻找一个更强大的解决方案。 - Xavier