Menu icon Foundation

My Posts

No Content

My Comments

Gino Barahona commented on Charles Smith's post about 4 years

I based on first solution:

#footer {
  width: 100%;
  height: 140px;
  padding: 14px 0 20px 0;
  background-color: #535353;
}
$(document).ready(function() {
  fixFooter();//at page load
});

$(window).resize(function() {
  fixFooter();//at page resize
});

function fixFooter() {
  footer=$("#footer");
  height=footer.height();
  paddingTop=parseInt(footer.css('padding-top'),10);//zero if is undefined
  paddingBottom=parseInt(footer.css('padding-bottom'),10);//zero if is undefined
  totalHeight=(height+paddingTop+paddingBottom);
  footerPosition=footer.position();
  windowHeight=$(window).height();
  height=(windowHeight - footerPosition.top)-totalHeight;
  if ( height > 0 ) {
    footer.css({
      'margin-top': (height) + 'px'
    });
  }
}

Posts Followed

  • 11
    Replies
  • Sticky Footer

    By Charles Smith

    I have been looking around and around for an answer to this; I've found many forums where others are asking, but no real straight forward solution. Is there a class or JS that will create the sticky footer like on the Foundation website that works seamle... (continued)

    Last Reply by Douglas Olena about 4 years ago


Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on Charles Smith's post about 4 years

I based on first solution:

#footer {
  width: 100%;
  height: 140px;
  padding: 14px 0 20px 0;
  background-color: #535353;
}
$(document).ready(function() {
  fixFooter();//at page load
});

$(window).resize(function() {
  fixFooter();//at page resize
});

function fixFooter() {
  footer=$("#footer");
  height=footer.height();
  paddingTop=parseInt(footer.css('padding-top'),10);//zero if is undefined
  paddingBottom=parseInt(footer.css('padding-bottom'),10);//zero if is undefined
  totalHeight=(height+paddingTop+paddingBottom);
  footerPosition=footer.position();
  windowHeight=$(window).height();
  height=(windowHeight - footerPosition.top)-totalHeight;
  if ( height > 0 ) {
    footer.css({
      'margin-top': (height) + 'px'
    });
  }
}

Posts Followed


Following

  • No Content

Followers

  • No Content