Skip to content

Instantly share code, notes, and snippets.

@spilliams

spilliams/stickyfoundationfooter.js

Created May 14, 2012 22:13
Show Gist options
  • Save spilliams/2697774 to your computer and use it in GitHub Desktop.
Save spilliams/2697774 to your computer and use it in GitHub Desktop.
Download ZIP
Make Ryan Fait's Sticky Footer work with ZURB Foundation
Raw
stickyfoundationfooter.js
/* Sticky Footer Foundation fix */
$(".footer, .push").height($(".footer .row").height()+"px");
$(".wrapper").css({'margin-bottom':(-1*$(".footer .row").height())+"px"});
window.onresize = function(){
$(".footer, .push").height($(".footer .row").height()+"px");
$(".wrapper").css({'margin-bottom':(-1*$(".footer .row").height())+"px"});
}
@justinspradlin
Copy link

Thanks, you saved the day for me!

@jonsuther
Copy link

I'm a little lost... Can someone explain what I am supposed to do with this? :-/

@cddemas
Copy link

cddemas commented Sep 5, 2012

Me too! Can someone put together a readme file to give some instructions.

@neilkpd
Copy link

neilkpd commented Sep 11, 2012

Instructions. Please

@monicams
Copy link

Hi all, remember that you have to follow the structure found here: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ meaning that you have to put a div with class 'wrapper' on your content, except on your footer where another div with class 'footer' around your footer. The snipped above will be inside a file called "stickyfoundationfooter.js" (if you noticed the name on top of the snippet), and you will have to add <script src="stickyfoundationfooter.js"></script> on your html too, so it can be called. And don't forget to add the styles shown on Ryan Fait's website! I hope that helps, it worked for me! ;)

@coreysyms
Copy link

This sticky footer will work with out a #wrapper or fixed heights and in mobile as well. http://tangerineindustries.com/download/sticky_footer/

@neilkpd
Copy link

neilkpd commented Mar 3, 2013

coreysyms
Could you help get your Sticky Footer work with Foundation 4.
Thank you.

@novastream
Copy link

@neilkpd had the same problem but found a slice of jquery code that helped me out.

http://www.egstudio.biz/sticky-footer-with-jquery/

I did it like this:

  1. Paste the code in stickyFooter.js and place it under js/custom
  2. Include the js file above
<script> $(document).foundation(); </script>
  1. Make sure your footer element has a id footer (or change the js file)

@coreysyms
Copy link

@neilkpd The sticky footer is supported in Foundation 4, jump over to my git page and email me if you have any questions. PS i didnt see your question because you forgot the @ before my name.

@broyalty
Copy link

@monicams I can not seem to get this stickyfoundationfooter.js to work. Can you elaborate?
Thank you!

@spilliams
Copy link
Author

hey sorry for the silence. didn't realize I was getting comments until today when I wanted to use this thing again. The html to use this with is very similar to Ryan Fait's example. It's:

<body>
    <div class="wrapper">
        all of your html
        <div class="push"></div>
    </div>
    <div class="footer>
        <div class="row">
            footer stuff
        </div>
    </div>
</body>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment