Menu icon Foundation
Foundation sticky footer

From what i can see in the docs, the foundation framework does not include a sticky footer.
Anyone know / have a good idea to using foundation classes to solve this, with a cross browser solution and variable height.

Along with the footer cant overlap the content if the viewport is scaled down in height.

Kind regards

Foundationstickyfooteroverlap

From what i can see in the docs, the foundation framework does not include a sticky footer.
Anyone know / have a good idea to using foundation classes to solve this, with a cross browser solution and variable height.

Along with the footer cant overlap the content if the viewport is scaled down in height.

Kind regards

Rafi Benkual almost 4 years ago
Cristian Ambaek almost 4 years ago

Thanks for your reply Refi

I took a look at the thread, and i tried the "most helpful" solution
this simple solution http://codepen.io/aetles/pen/jAdzw
and
http://mystrd.at/modern-clean-css-sticky-footer/

Which all does not work unless you edit their solution. So at the moment im back to either finding another solution that actually work, or creating my own.

Cristian Ambaek almost 4 years ago

Bumping the thread with new info

I have taken a look at a sticky footer example here http://blog.grayghostvisuals.com/css/flexbox-sticky-footer/ which is the first sticky footer example i have found that actually works cross browsers.

But as with any solution their is a problem.
In Chrome, Opera and IE, if you shrink the viewport vertically the footer and its content will start to overlap content above it, instead of collapsing the footer element entirely. The only browser that collapse the element is Firefox.

My question (and hoping someone can help me) is how i add functionality in Chrome, Opera and IE to collapse the footer when shrinking the viewport, so it wont overlap content above it.
For an example check my test site http://mnrb.dk/template-1-test/

Robben almost 4 years ago

The .js one you may have visited does work and is variable heigth:
https://github.com/coreysyms/foundationStickyFooter
I find the problem with it is that you can see it jumping into place sometimes and it does not position itself perfectly 100% of the time. But ok until we find a better solution.

From distant experiments I must mention 2 hunches:

  • The solution for a top-bar site may differ from an off-canvas one
    I wish Zurb could provide official solutions for both, cause I'm guessing major time is lost by people on this now. And if a user solution is found, people may fear it will break something in Foundation at some point, because it is not 'official' or changed a CSS rule here or there for it to work.

  • Possibly similar to your current problem: when you think you have found a solution, also check if in case of a top-bar menu longer than the viewport, if that menu is scrollable (to have access to all menus) instead of maybe acting weirdly and the sticky footer code preventing that. Just a hunch though...
    In the latter case you might be able to solve it by having an open/close menu event change some of the sticky footer css back & forth.

Good luck & thanks for looking around :)

Cristian Ambaek almost 4 years ago

Thanks for the reply Robben

I believe i did find that solution some time back, but went away from it again since i could not get it working to a satisfying level.

Instead i have been trying to box out a satisfying sticky footer out (found here)
http://stackoverflow.com/questions/29733831/foundation-5-sticky-footer-working-example-but-has-bugs-to-iron-out

I have a problem with Chrome ignoring the footer for some reason, if anyone has some suggestions / thoughts to that please feel free to add them in the thread.

The footer also dosent quite work in Safari, but currently ignoring that (whistle and walk away).