Question

我们的移动网络应用程序具有粘性底部导航功能，就像您在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);
}

DEMO to try on phone

在纵向模式下，它始终可见：

在横向模式下，您可以在屏幕上滚动显示顶部地址栏的大小：

有没有人遇到过这样的问题？我将不胜感激任何帮助使页脚留在屏幕上。感谢

Answer 1

你无能为力。 Safari的横向模式使容器内容离开屏幕。这是不可检测的，因此无法解决。我试图说明会发生什么：

蓝色条= Safari的导航栏

黄色条=您应用的导航栏

不是缩小容器的高度，而是让它离开屏幕。

Answer 2

这是一种解决方法，而不是真正的解决方案。但是position: fixed多年来一直是移动设备的问题，解决此问题的最佳方法是使用position: sticky。

sticky在其父级中的行为类似于position: relative，直到a 在视口中满足给定的偏移阈值。

_{来自：Stick your landings! position: sticky lands in WebKit}

但 position: sticky尚不完全支持，所以我建议也使用

position: sticky; /* currently in development for MS Edge */
position: -webkit-sticky;
position: -moz-sticky;
position: -o-sticky;

_{查看状态here了解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>

Answer 3

还有另一种在页面底部创建固定元素的方法：

将<body>元素（或任何包装标题，内容和页脚）设置为display: flex; height: 100vh。然后你拿走页脚并将其设置为margin-top: auto。

HTML：

<body>
    <header>
    </header>
    <main>
    <main>
    <footer>
    </footer>
</body>

CSS：

html {
    height: 100%;
}

body {
    height: 100%;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}

具有相同标记的不同解决方案是使用CSS Grid：

html {
    height: 100%;
}

body {
    height: 100%;
    display: grid;
    grid-template-rows: auto 1fr auto;
}

为了充分利用这两个世界，您可以将CSS网格样式包装在@supports(display: grid){}包装器中。如果支持Grid，浏览器将采用该格式，否则将回退到Flexbox。

使用这种技术最好的方法是，您不会遇到重叠内容，进入缩放问题，并且从一开始就完全响应。

有关于该主题的CSS技巧文章：https://css-tricks.com/couple-takes-sticky-footer/

Answer 4

尝试使用css中的固定位置元素：

transform:translate3d(0px, 0, 0);
-webkit-transform:translate3d(0px, 0, 0);

Answer 5

我遇到了同样的问题，并以测试人员满意的方式解决了该问题。并不是一个完美的解决方案，但是可以做到。

添加带有空白或边距的空元素。

const _userAgent = navigator.userAgent.toLowerCase();
if (_userAgent.indexOf('safari') != -1) {
    if (_userAgent.indexOf('chrome') == -1) {
        $('.myelem').append('<div class="my-5"></div>');
    }
}

Answer 6

切换到横向模式时确实发生了某些事情，并且往返于Safari的“最小UI”是一个窗口调整大小事件。您可以检查固定元素的getBoundingClientRect().bottom来查看它是否大于window.innerHeight（这意味着固定元素不在窗口底部）。如果是这样，可以将bottom元素的css属性fixed设置为element.getBoundingClientRect().bottom - window.innerHeight。这将保持固定元件的位置。对用户来说似乎有点讨厌，但这比从屏幕底部消失的元素要好。

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

6 个答案: