Menu icon Foundation
Sticky Footer

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 seamlessly with Foundation without hacking?

Thank you for your help.

Charles

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 seamlessly with Foundation without hacking?

Thank you for your help.

Charles


Charles Smith gave the most helpful answer for this post
Charles Smith over 3 years ago

Here is a solution just in case anyone is interested.

  1. Create a div around your footer. HTML <div id="footer"> <!-- Your footer here --> </div>
  2. Add a little bit of JS - I placed it is a file called sticky-footer.js - make sure you call it right after your jquery.js or it won't load.
 $(window).bind("load", function () {
    var footer = $("#footer");
    var pos = footer.position();
    var height = $(window).height();
    height = height - pos.top;
    height = height - footer.height();
    if (height > 0) {
        footer.css({
            'margin-top': height + 'px'
        });
    }
});

I hope someone finds this helpful as I pretty much tweaked most of the day to get this working :)

Charles Smith over 3 years ago

bump

Andrew Patterson over 3 years ago

Charles, when you say 'sticky footer' do you mean the content that shows up at the bottom of every page? I think the answer lies in the tool or template that you are using to build your pages. Each tool will provide its own way to include common bits. As far as I know there isn't any Foundation specific JS that does that.

Andrew P.

Rafi Benkual over 3 years ago

If you are trying to get a "fixed" effect as some do with topbar, you can set an id of footer, then:

#footer {

position: fixed;

bottom: 0;

width: 100%;

height: 100px; /* choose any height */

}

There is a more in depth method here:
http://www.cssstickyfooter.com/using-sticky-footer-code.html

Mihai Stroe over 3 years ago

If you're using sass with compass, compass has a built-in sticky footer which you can read about here:

http://compass-style.org/reference/compass/layout/sticky_footer/

If you're working with regular CSS then you can reference the original sticky footer Compass adopted:

http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

Charles Smith over 3 years ago

Thank you for the responses. Rafi, I tried the solution a few days ago but unfortunately, my main content hides behind the footer when I do this. Mihai, I will look into compass as I am using Sass.

Thank you.

Charles Smith over 3 years ago

Here is a solution just in case anyone is interested.

  1. Create a div around your footer. HTML <div id="footer"> <!-- Your footer here --> </div>
  2. Add a little bit of JS - I placed it is a file called sticky-footer.js - make sure you call it right after your jquery.js or it won't load.
 $(window).bind("load", function () {
    var footer = $("#footer");
    var pos = footer.position();
    var height = $(window).height();
    height = height - pos.top;
    height = height - footer.height();
    if (height > 0) {
        footer.css({
            'margin-top': height + 'px'
        });
    }
});

I hope someone finds this helpful as I pretty much tweaked most of the day to get this working :)

Rafi Benkual over 2 years ago

Came across this one too. Looks great https://github.com/coreysyms/foundationStickyFooter

Rafi Benkual over 2 years ago

And a simple CSS solution http://codepen.io/aetles/pen/jAdzw

Gino Barahona about 2 years ago

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

Douglas Olena about 2 years ago

The Ryan Fait sticky footer provides the best solution for me, though the css required is thinner because Foundation css resets the browser to the required values. The css:

/* Sticky Footer: compliments to http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ */

.wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -4em;
}

footer, .push {
  height: 4em;
}

Adjust the em in .wrapper margin and footer height to keep your footer correctly visible.

The wrapper class sits around the site content. Using the standard footer tag, instead of a footer class works fine.

The .push class sits in an empty div just before the end of the of the .wrapper div and the footer tag and content follows the .wrapper. The html:

<body>
  <div class="wrapper">
    <!-- body content -->
    <div class="push"></div>
  </div>
  <footer>
    <!-- footer content -->
  </footer>
  <script . . .></script>
</body>