页脚动态绝对位置，缺失像素 - 无限滚动

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; 
}