Sticky Footer in Skeleton based Website

Question

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!

Related to http://stackoverflow.com/questions/30521642/custom-cms-with-with-ability-to-change-themes-from-admin-panel please start selecting answers for your questions instead of simply commenting with "thank you". — Luceos, May 29 '15 at 05:53

score 5 · Answer 1 · answered Apr 23 '15 at 21:43

5

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.

answered Apr 23 '15 at 21:43

Mahmoud Hashemi

2,655
30
19

1

Sure. You can upvote and accept the answer if it works well for you. ;) – Mahmoud Hashemi May 30 '15 at 07:45

score 0 · Answer 2 · answered Dec 25 '14 at 20:54

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

score 0 · Answer 3 · answered Feb 10 '17 at 15:59

0

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

answered Feb 10 '17 at 15:59

Eddy Borja

1,638
17
21

Sticky Footer in Skeleton based Website

3 Answers3