Css 如何创建适用于移动和桌面的粘性页脚？

我浏览了许多不同的帖子，似乎没有一个好的、有效的解决方案。我希望我的页脚位于页面底部，无论该网站是在桌面显示器上查看还是在Safari的iPhone上查看

当前css代码：

body {
    margin-bottom: 60px;
}
.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px;
    line-height: 60px; 
    background-color: #f5f5f5;
}

HTML代码：

<footer class="footer">
  <div class="container">
    <span class="text-muted">text</span>
  </div>
</footer>

文本

---

页脚目前位于桌面上的页面底部，在移动Safari页面的中间。

原因是因为它是基于窗口的高度来定位它的绝对值，而不是你的内容。

您需要做的是为手机添加媒体查询。比如：

@media screen and (max-width: 1024px){
  body{
   margin-bottom: 0;
  }
  .footer {
    position: relative;
  }
}

---

很好！谢谢