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

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

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

您需要为移动设备添加媒体查询。比如：

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