Menu icon Foundation
Sticky footer in Foundation 6

With the flex grid, is there an easier way? I have seen posts like https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ that use CSS Flex attributes.

Is the solution to use http://foundation.zurb.com/sites/docs/sticky.html with a top anchor? Any advice would be much appreciated.

Thank you,

footer

With the flex grid, is there an easier way? I have seen posts like https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ that use CSS Flex attributes.

Is the solution to use http://foundation.zurb.com/sites/docs/sticky.html with a top anchor? Any advice would be much appreciated.

Thank you,

Rafi Benkual almost 4 years ago

Hi Nick,
There might be! What are you trying to build? Do you have a really short page with little content?

Nick Shook almost 4 years ago

yes, exactly I have some pages w/ a lot of content and some pages with very little. Does using the vh property fall in line w/ the flex-grid?

Nick Shook almost 4 years ago

I was able to answer my own question,.

If you have html like:

<body>
  <div class='content'>
     # some content
   </div>
   <footer>
     # some footer
   </footer>
</body>

You'll need the following sass:

body                                                                                             
  height: auto !important                                                                        
  display: flex                                                                                  
  min-height: 100vh                                                                              
  flex-direction: column                                                                         
.content                                                                                         
  flex: 1 0

What took me a while to figure out is that there is an automatic setting of body { height: 100% } that needs to be overriden for this to work.

Jeff Kinley almost 4 years ago

Nick's solution is not working for me. Any other ideas? I am using JointsWP. I have tried a number of things but can't get it to work. It's such a simple thing to do normally. I'll keep working on it and post if I figure it out.

Nick Shook almost 4 years ago

Hi Jeff,

Do you have the flex grid enabled from foundation 6? I did this on Stealthworker.com if you're interested in seeing it in action.

Hope this helps!

Jeff Kinley almost 4 years ago

Thanks, Nick. No I didn't but didn't think it would be necessary. I really only wanted to impliment the very basics of Flexbox and the site needs to be compatible with earlier browsers. This was just going to be a progressive enhancment for browsers that support it. I suppose I can enble the flex-grid. How is browser support at this time?

Thanks,

Jeff

Nick Shook almost 4 years ago

http://caniuse.com/#feat=flexbox for browser support
And as far as I'm concerned ie8 is officially deprecated!