clearfix + sticky footer

solution for a sticky footer and a clearfix fix to remove the white bottom border in chrome and safari

by Danny_Joris

HTML

<div id="page">

  <div id="content"></div>
    
  <div id="sticky-footer-anchor"></div>

</div>

CSS

#page
{
  float: left;
  background-color: #eee;
  width: 300px;
  height: 600px;
}

#content

{
  background-color: #ddd;
  height: 200px;
  width: 100%;
  margin: 20px;
}

#sticky-footer-push
{
  background-color: red;
}

JavaScript

jQuery(document).ready(function() {

function positionFooter() {
  var docHeight = $(document.body).height() - $("#sticky-footer-push").height();
  if(docHeight < $(window).height()){
    var diff = $(window).height() - docHeight;
    var diff = diff - 20; // there is already a bottom padding of 45px everywhere;
    if (!$("#sticky-footer-push").length > 0) {
      $(footer).before('<div id="sticky-footer-push"></div>');
    }
    $("#sticky-footer-push").height(diff);
  }
}

footer = $("#sticky-footer-anchor");

positionFooter();

$(window)
  .scroll(positionFooter)
  .resize(positionFooter);

});