我们的移动Web应用程序具有粘性底部导航，就像您在iOS应用程序中经常发现的那样，并且在横向浏览Safari 10.3之后，只能在屏幕上滚动粘性导航(页脚)。即使它是位置：固定并设置为底部：0在旧的Safari版本上也是不可能的。
粘性导航/页脚的样式如下：
footer {
position: fixed;
height: 50px;
left: 0;
right: 0;
bottom: 0;
background: rgba(255,0.7);
}
在纵向模式下，它始终可见：
在横向模式下，您可以在屏幕上滚动显示顶部地址栏的大小：
有人遇到过这样的问题吗？我将不胜感激任何帮助使页脚留在屏幕上。谢谢
解决方法
这是一种解决方法，而不是真正的解决方案。然而，位置：固定已成为移动设备多年的问题，克服此问题的最佳方法是使用
position: sticky。
stickybehaves likeposition: relativewithin its parent,until a
given offset threshold is met in the viewport.
来自：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>
原文地址：https://www.jb51.cc/html/232440.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
