頁腳動態絕對位置，缺失像素 - 無限滾動

Question

我需要有一個頁腳與其父窗口相關，我需要將其固定到窗口底部。

我做了一個計算，以得到正確的top值，但我缺少8個像素 - 這會導致滾動無限滾動。

我在計算中缺少什麼？

$(function() { 
 
    changeFooter(); 
 
}); 
 

 
$(window).resize(function() { 
 
    changeFooter(); 
 
}); 
 
$(window).scroll(function() { 
 
    changeFooter(); 
 
}); 
 

 
function changeFooter() { 
 
    var footer = $("#footer"); 
 
    footer.css({ top: getFooterTop(footer) + 'px' }); 
 
} 
 

 
function getFooterTop(footer) { 
 
    return window.innerHeight + $(window).scrollTop() - footer.height(); 
 
} 
 

 
function getFooterTopFixed(footer) { 
 
    return window.innerHeight + $(window).scrollTop() - footer.height() - 8; 
 
}

#wrap { 
 
    position:absolute; 
 
    left:0px; 
 
    width: 100%; 
 
    margin-bottom: 50px; 
 
} 
 

 
#footer { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 50px; 
 
    background-color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="wrap"> 
 
    <p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p> 
 
    <div id="footer"></div> 
 
</div>

https://jsfiddle.net/rs4f1jt0/2/

您可以在鏈接看到-8像素修復的定位，我只是想不通那些人在那裏8個像素來自何處來解決計算。

謝謝。

Answer 1

爲什麼不嘗試使用固定在頁腳上的位置？就像這樣：

#wrap { 
position:relative; 
left:0px; 
width: 100%; 
margin-bottom: 50px; 
} 

#footer { 
position: fixed; 
bottom:0; 
width: 100%; 
height: 50px; 
background-color: green; 
}