html – 在Safari Mobile 10.3粘性页脚可以在屏幕上滚动

前端之家收集整理的这篇文章主要介绍了html – 在Safari Mobile 10.3粘性页脚可以在屏幕上滚动前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我们的移动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

sticky behaves like position: relative within 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.f2er.com/html/232440.html

猜你在找的HTML相关文章