Absolute Fußzeile nicht am unteren Rand der Seite, mobile

Question

Okay, so habe ich eine Reihe der anderen Fragen auf dieser Website in Bezug auf sticky footers angeschaut und habe haufen von ihnen versucht, sie arbeiten auf dem Handy, aber ohne Erfolg (Desktop ist fein). Ich benutze buddypress auf meiner Seite, damit der HTML-Code generiert wird, hier sieht es im Moment so aus. Ich habe einen grünen Hintergrund hinzugefügt, um es klarer zu machen.

Mobile Image

Hier ist meine CSS für die Buddy Container und Fußzeile. Es gibt eine absolute Positionierung auf dem Container und der Fußzeile, während die divs drinnen (Header, nav und body) alle relativ sind.

#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

Versuchen Sie diese auf Ihrem Fußzeile -

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