CODEWITHSUNDEEP
javascriptjqueryhtmlcssskeleton-css-boilerplate
Usman Sher
Usman Sher

Reputation: 41

Sticky Footer in Skeleton based Website

I am trying to add a "sticky footer" to my web site based on skeleton but I can't get it to work correctly. I am doing this based on the instruction on this website: http://www.cssstickyfooter.com/using-sticky-footer-code.html. In Chrome I get an extra pixel or two in the height of the page which result in a vertical scrollbar and in IE the main container becomes left-aligned.

Any idea how I should implement this properly based on Skeleton? Thank you Dave for the great work!

Upvotes: 3

Views: 3743

Answers (3)

Eddy Borja
Eddy Borja

Reputation: 1658

If you prefer to have the footer only come into view if the user tries to scroll down to the very bottom of the page, put everything that goes above the footer into a single div that has a min-height of '100vh'.

Upvotes: 0

Mahmoud Hashemi
Mahmoud Hashemi

Reputation: 2835

I've developed a dead-simple pure-CSS solution to this now, located here. The solution is based on Skeleton 2.0.4 and basically consists of creating two separate skeleton containers/rowstacks: One for the header/body, another for the sticky footer.

Upvotes: 5

mcan
mcan

Reputation: 7

Jquery 

$(document).ready(function() {
   var footerHeight = $('.footer').height()+30; // "+30" footer on to add space
   $('body').css('margin-bottom',footerHeight);
});

Css

html {
  position: relative;
  min-height:100%;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 10px;
  color: white;
  background-color: #7bbc42;
}

Upvotes: 0

Related Questions