html – 在Safari Mobile 10.3粘性页脚可以在屏幕上滚动
发布时间:2020-12-14 21:20:26 所属栏目:资源 来源:网络整理
导读:我们的移动Web应用程序具有粘性底部导航,就像您在iOS应用程序中经常发现的那样,并且在横向浏览Safari 10.3之后,只能在屏幕上滚动粘性导航(页脚)。即使它是位置:固定并设置为底部:0在旧的Safari版本上也是不可能的。 粘性导航/页脚的样式如下: footer {
我们的移动Web应用程序具有粘性底部导航,就像您在iOS应用程序中经常发现的那样,并且在横向浏览Safari 10.3之后,只能在屏幕上滚动粘性导航(页脚)。即使它是位置:固定并设置为底部:0在旧的Safari版本上也是不可能的。
粘性导航/页脚的样式如下: footer { position: fixed; height: 50px; left: 0; right: 0; bottom: 0; background: rgba(255,0.7); } DEMO to try on phone 在纵向模式下,它始终可见: 在横向模式下,您可以在屏幕上滚动显示顶部地址栏的大小: 有人遇到过这样的问题吗?我将不胜感激任何帮助使页脚留在屏幕上。谢谢 解决方法
这是一种解决方法,而不是真正的解决方案。然而,位置:固定已成为移动设备多年的问题,克服此问题的最佳方法是使用
position: sticky 。
来自:Stick your landings! position: sticky lands in WebKit 但是位置:粘性尚未完全支持,所以我建议也使用: position: sticky; /* currently in development for MS Edge */ position: -webkit-sticky; position: -moz-sticky; position: -o-sticky; 有关MS Edge粘性支持状态,请参阅状态here(谢谢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.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> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
相关内容