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: .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 bees left-aligned.

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

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./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 bees left-aligned.

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

• javascript
• jquery
• html
• css
• skeleton-css-boilerplate

• 2 show the demo. we are not telepaths. – knitevision Commented Dec 25, 2014 at 19:02
• jsfiddle/8w5pd9n5... Heres the Demo – Usman Sher Commented Dec 26, 2014 at 8:02
• want to make the Footer Sticky... And Responsive – Usman Sher Commented Dec 26, 2014 at 8:03
• Related to stackoverflow./questions/30521642/… please start selecting answers for your questions instead of simply menting with "thank you". – Luceos Commented May 29, 2015 at 5:53

3 Answers 3

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.

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

If you prefer to have the footer only e 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'.