如何创建适用于移动设备和台式机的粘性页脚？

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;
  }
}