Menu icon Foundation
Best way to push footer to bottom of page? Sticky footer?

Hi, 

I'm having trouble getting a footer div to push to the bottom of the page when the content of the page is short. I've tried a few solutions from the net but can't get them to work. Does anyone have a solution that works with the foundation grid? It would be better to have a solution that doesn't need the footer size, but not the end of the world if it does need it.

footerbottompush

Hi, 

I'm having trouble getting a footer div to push to the bottom of the page when the content of the page is short. I've tried a few solutions from the net but can't get them to work. Does anyone have a solution that works with the foundation grid? It would be better to have a solution that doesn't need the footer size, but not the end of the world if it does need it.

Eliana Hermione 29 days ago

Footer div to push to the base of the page when the substance of the page is short. I've attempted a couple of arrangements from the  Essay Time  net yet can't motivate them to work. Does anybody have an answer that works with the establishment framework? It is smarter to have an answer that needn't bother with the footer estimate, yet not the apocalypse on the off chance that it needs it.

Roy Six 29 days ago

Hi Craig, there are many ways to keep the footer pushed down to the bottom, but I would recommend using Flexbox CSS for this since flex is native CSS and doesn't require any tricks. Most modern browsers should support flex.

This is a small tutorial that keeps the footer down using flex CSS and uses a bare Foundation 6 layout with Off-Canvas Wrapper (if you're not using off-canvas, you can replace the "off-canvas-content" div with just a regular div "container").

Hope it helps.

 

Craig Wright 29 days ago

Thanks Roy. I'm using off-canvas at the top for a mobile menu, then a header, then 2 divs - left one is an accordion menu, right one is content. To complicate matters, the left one vanishes on small devices and the right one goes full width. The two divs are followed by the footer div. 

I'll take a look at your link later, thanks.

Nigel Osborne 12 days ago

Roy, Thanks that worked for me too.

But is there a more Foundation / native solution now that XY grid is available? Not an essential as your directions work fine in XY grid, but I thought it possible it has its own solution. Can't find it in the docs, though I may be looking for the wrong thing!!

Nik Sol 8 days ago

Hello Nigel,

You can use this base code that uses XY grid to create your footer:

<div class="grid-y grid-padding-x grid-frame">
  <div class="cell auto">
  </div>
  <div class="cell footer">
    <h3>Here's my footer</h3>
  </div>
</div>

With .grid-frame your footer will always stay at the bottom even with empty body.

Nigel Osborne 8 days ago

Sorry, had to delete the original reply.

This works fine when content is empty or small, but not when content is greater than screen height. But that is the point (as I understand it) of this thread. Perhaps I have added my query to the wrong thread :-(

I need the footer to remain at the base of the screen OR the base of the content, whichever is the greater. So it seems the best solution is still the original as per Roy Six's link.

Roy Six 7 days ago

Indeed Nigel, Nik's grid-frame code is almost there, but needs some modifications to work as we want. There's also another way: we could go lower-level and use Foundation's vanilla flexbox utility classes. So, these are the two methods so far with codepens and notes showing how they can be used to make the footer stay pushed down. 

1. Foundation Vanilla Flexbox Utility Classes

  • Codepen Example
  • Notes: Requires two modifications by making .flex-container have a height of 100vh and adding a .flex-child-no-shrink class to prevent divs from shrinking

 

2. Foundation Grid-Frame

  • Codepen Example
  • Notes: Requires three modifications by making .grid-container have overflow for the scrollbar to be visible and adding a .cell.no-shrink to prevent shrinking and .cell.grow class to make the main content div grow/expand

(Sorry, I would link to the docs, but I'm afraid I'll get flagged with too many links.)

It seems this is still being worked on by the developers and we should continue to revisit this to see if they add more classes that will allow for no modifications.

Klaudia Shultz 6 days ago

You can simply attach the footer to the bottom of the page using css