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

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