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"});
}
@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