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

Question

我浏览了许多不同的帖子，但似乎没有一个好的、可行的解决方案。我希望我的页脚位于页面底部，无论是通过桌面显示器还是在 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 版页面中间。

Answer 1

原因是它根据 window 的高度绝对定位，而不是您的内容。

您需要做的是为移动设备添加一个媒体查询。类似于：

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

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

How to create a sticky footer that works with mobile and desktop?

css

mobile-safari

sticky-footer