2

我正在开发一个网络应用程序，我需要让一个 div 贴在视口的底部。始终可见且始终位于视口底部。这里有一个我想要的例子：footer。不幸的是，这在 iPhone 上不起作用。我可以想出一些使用 javascript 来做到这一点的方法，但我宁愿不这样做。关于如何仅使用 css 在 iPhone 上获得这种效果的任何想法？

4

5 回答 5

6

iOS 5 改变了这种情况。现在你可以使用overflow:scrollor position:fixed，它会做预期的事情。例如，这种类型的代码：

<header style="
    position: fixed; top: 0; left: 0;
    width: 100%; height: 20px; font-size: 20px">
    Heading
</header>
<article style="margin: 20px 0">
    Your page here
</article>
<footer style="
    position: fixed; bottom: 0; left: 0;
    width: 100%; height: 20px; font-size: 20px">
    Footer
</footer>

...应该可以正常工作。尽管仍有许多设备运行旧 iOS 版本，因此您可能希望在旧设备上延迟加载Scrollability，您可以使用以下 javascript 进行测试：

var isios = navigator.appVersion.match(/CPU( iPhone)? OS ([0-9]+)_([0-9]+)(_([0-9]+))? like/i);
// if that succeeds, it usually returns ["CPU OS X_Y_Z like",undefined,X,Y,Z]
if (isios && isios[2] < 5){
    // load scrollability here. jquery example:
    $.getScript("/js/scrollability.min.js", function() {
        // code to run when scrollability's loaded
    }
}
于 2012-01-08T08:11:07.093 回答
4

你不能。至少不是你想的那样。

你必须伪造整个事情是javascript。使用像iScroll这样的东西

这有点糟糕，但 Mobile Safari 根本不支持任何类型的固定定位。因此，您必须使页面大小等于屏幕大小，然后使用 javascript 来处理触摸并设置滚动偏移量和动画滚动条等等。

我链接的这个脚本为你做了很多，但它不像原生解决方案那样健壮。

于 2010-03-16T17:15:45.747 回答
0

这是一个关于如何结合 CSS3、HTML 和 JavaScript 为 iPhone 创建导航栏的示例。 http://www.mindovercode.com/2010/09/12/iphone-navbar-using-xui/

ps：它在横向模式下工作。

于 2010-08-10T02:40:06.420 回答
0

这是一个带有代码的工作示例。它不适合胆小的人：

http://doctyper.com/archives/200808/fixed-positioning-on-mobile-safari/

于 2010-09-14T19:45:13.363 回答
0

有一个新的 JavaScript 可以更容易地工作：http: //joehewitt.github.com/scrollability/

因此在 iOS 5 中会有固定位置和溢出滚动可用！

于 2011-06-28T22:38:47.083 回答