移动页面的绝对页脚不固定

Question

Okay so i have looked at a bunch of the other questions on this site regarding sticky footers and have tried heaps of them to get them working on mobile but to no avail (desktop is fine). I am running buddypress on my site so the html is generated through that, here is what it looks like at the moment. I added a green background to make it more clear.

Mobile Image

Here is my css for the buddypress container and footer. There is absolute positioning on the container and footer while the divs inside (header, nav, and body) are all relative.

#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

Try this on your footer -

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