在Safari Mobile 10.3粘性页脚可以在屏幕上滚动
And*_*ren 29 html css mobile mobile-safari ios
我们的移动网络应用程序具有粘性底部导航功能,就像您在iOS应用程序中经常发现的那样,在Safari 10.3 仅在横向上发布后,可以在屏幕上滚动粘性导航(页脚).虽然它已经position: fixed设置bottom: 0并且在旧的Safari版本上也是不可能的.
粘性导航/页脚的样式如下:
footer {
position: fixed;
height: 50px;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 0, 0, 0.7);
}
在纵向模式下,它始终可见:
在横向模式下,您可以在屏幕上滚动显示顶部地址栏的大小:
有人遇到过这样的问题吗？我将不胜感激任何帮助使页脚留在屏幕上.谢谢
Tho*_*ven 10
你无能为力.Safari的横向模式使容器内容离开屏幕.这是不可检测的,因此无法解决.我试图说明发生了什么:
蓝色栏= Safari的导航栏
黄色栏=您的应用程序的导航栏
Safari不会缩小容器的高度,而是让它离开屏幕.
- 这很清楚,但它无助于解决问题.我希望也许有人有一些见解为什么在Safari 10.3中实际引入了这个以及如何处理它.解决这个问题的一种可能方法是使体内的容器可滚动和身体 - 100%高度静态.但这需要完全重新实现我们的布局,这是我们不想做的事情. (3认同)
这是一种解决方法而不是真正的解决方案.但是position: fixed多年来一直是移动设备的问题,克服这个问题的最佳方法就是使用position: sticky.
stickyposition: relative在视口中满足给定的偏移阈值之前,其行为类似于其父级.
但是 position: sticky还没有完全支持,所以我建议也使用:
position: sticky; /* currently in development for MS Edge */
position: -webkit-sticky;
position: -moz-sticky;
position: -o-sticky;
有关MS Edge 支持状态,请参阅此处的sticky状态(谢谢Frits)
html,
body {
height: 200%;
}
body {
background-image: linear-gradient(180deg, #ededed 0px, #ededed 9px, #000000 9px, #000000 10px);
background-size: 100% 10px;
}
footer {
position: sticky; /* currently in development for MS Edge */
position: -webkit-sticky;
position: -moz-sticky;
position: -o-sticky;
height: 50px;
top: 80%;
background: rgba(255, 0, 0, 0.7);
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<footer>
</footer>
</body>
</html>| 归档时间： |
|
| 查看次数： |
6245 次 |
| 最近记录： |