Position:absolute Footer

HTML

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

CSS

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

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

JavaScript

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