html - 绝对页脚不粘在页面底部，移动

Question

好的，所以我查看了该网站上关于粘性页脚的其他一些问题，并尝试了很多让它们在移动设备上工作但无济于事(台式机很好)。我在我的网站上运行 buddypress，因此 html 是通过它生成的，这就是它目前的样子。我添加了绿色背景以使其更加清晰。

Mobile Image

这是我的 buddypress 容器和页脚的 CSS。容器和页脚是绝对定位，而里面的 div(header、nav 和 body)都是相对的。

#buddypress{
  width:100%; /* Add this */
  height:100%;
  max-width: 480px;
  top:0;
  left:0;
  position: absolute;
  margin-bottom: 100px;
  background:black;
  color:white;
}
.x-colophon.bottom {
  height: 100px;
  background: green;
  bottom: 0;
  position: absolute;
}

#buddypress #item-header{
background-color: rgba(49,175,145,1);
border: none;
width: 100%;
left: 0;
right: 0;
position: relative;

}

#item-nav {
background-color: white;
font-size: 16px;
width: 100%;
position: relative;
}

#item-body {
background-color: white;
color: black;
width: 100%;
position: relative;
}

Answer 1

在你的页脚上试试这个 -

.footer {
        position: relative;
        bottom:  -500px; // you can adjust the negative value
    }