絶対フッタがページ下部に貼られていない、モバイル

Question

私はこのサイトの他の質問については、スティッキーフッターについて見てきましたが、モバイルで作業するようにヒープを試みましたが、デスクトップはありません）。私は自分のサイトでbuddypressを実行しているので、htmlがそれを介して生成されます。ここでは現時点でどのように見えますか？私はそれをより明確にするために緑の背景を追加しました。ここで

Mobile Image

バディコンテナとフッターのための私のCSSです。内側のdiv（ヘッダー、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 
    }