Menu icon Foundation
Foundation 6 "Sticky" Bottom Footer with Off-Canvas and Flexbox CSS (Tutorial)

I've seen a few people ask how to write a basic Foundation layout that achieves a footer that is "stuck" (not position: fixed) to the bottom of the browser window.

Basically, this is a footer that sits directly below the content with one special condition: on pages where there isn't enough content to fill up the height of the browser window, the footer should still be "stuck" to the bottom of the window. (Opposed to having any empty whitespace below the footer.)

Example

Foundation Sticky Footer

 

Codepen (Live Example)

 

Codepen

You can adjust the main's height in the codepen to see how the footer responds.

 

HTML

<div class="off-canvas-wrapper">
  <div id="off-canvas" class="off-canvas position-left" data-off-canvas>My Off-Canvas</div>
  <div class="off-canvas-content" data-off-canvas-content>
    <header>My Header</header>
    <nav>My Nav</nav>
    <main>My Main</main>
    <footer>My Footer</footer>
  </div>
</div>

Explanation: This is a bare layout that uses Foundation's Off-Canvas Wrapper structure, containing a header, nav, main, and footer. If you're not using Off-Canvas in your project, you can remove the three "messy" off-canvas divs, and create a simple div container that just contains your page's structural elements (e.g. header, nav, main, and footer).

 

CSS 

There's a flexbox CSS way to do this and a "non-flexbox" CSS way to do this. I would personally recommend the flexbox way since:

  • The "non-flexbox" way usually requires you to have a predetermined footer height or some convoluted "hack"
  • Foundation is now using flexbox in its latest grids
  • Flexbox is supported in most of the recent major browser versions (IE10+ is supported)

No worries on grid choices: you can use the flexbox CSS with the new XY Grid in 6.4 or even the legacy Float grid (as long as your targeted browsers support flexbox).

.off-canvas-wrapper {
    overflow: visible;
}

.off-canvas-content {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

header, nav, footer {
    flex-shrink: 0;
}

main {
    flex: 1 0 auto; /* Use 1 0 auto instead of just 1 for backwards compatibility with other browsers */
}

Explanation: The off-canvas-wrapper overflow is needed due to the way the scrollbar is hidden by foundation's off-canvas-wrapper structure (if you are not using off-canvas and just a container div, you don't need this line). To start, we give the "container" div (off-canvas-content) a display of flex, a direction of column (for a conventional top to bottom page layout -- but you could try "row" for a funky left-to-right layout), and a 100 height viewport to always make the height equal to 100% of the browser window. Finally, we give the header, nav, and footer a flex-shrink of 0, but the main gets a flex of 1 (which also gives it a flex-grow of 1) so that it "grows"/expands the container to the browser window height.

Full credit to Philip Walton's Flexbox CSS Article for the flex CSS. I simply took his CSS and applied it to the foundation wrapper structure.

I hope this helps,

Roy

 

Foundation6stickyfooterbottomoff-canvasflexflexboxxy gridfloat grid

I've seen a few people ask how to write a basic Foundation layout that achieves a footer that is "stuck" (not position: fixed) to the bottom of the browser window.

Basically, this is a footer that sits directly below the content with one special condition: on pages where there isn't enough content to fill up the height of the browser window, the footer should still be "stuck" to the bottom of the window. (Opposed to having any empty whitespace below the footer.)

Example

Foundation Sticky Footer

 

Codepen (Live Example)

 

Codepen

You can adjust the main's height in the codepen to see how the footer responds.

 

HTML

<div class="off-canvas-wrapper">
  <div id="off-canvas" class="off-canvas position-left" data-off-canvas>My Off-Canvas</div>
  <div class="off-canvas-content" data-off-canvas-content>
    <header>My Header</header>
    <nav>My Nav</nav>
    <main>My Main</main>
    <footer>My Footer</footer>
  </div>
</div>

Explanation: This is a bare layout that uses Foundation's Off-Canvas Wrapper structure, containing a header, nav, main, and footer. If you're not using Off-Canvas in your project, you can remove the three "messy" off-canvas divs, and create a simple div container that just contains your page's structural elements (e.g. header, nav, main, and footer).

 

CSS 

There's a flexbox CSS way to do this and a "non-flexbox" CSS way to do this. I would personally recommend the flexbox way since:

  • The "non-flexbox" way usually requires you to have a predetermined footer height or some convoluted "hack"
  • Foundation is now using flexbox in its latest grids
  • Flexbox is supported in most of the recent major browser versions (IE10+ is supported)

No worries on grid choices: you can use the flexbox CSS with the new XY Grid in 6.4 or even the legacy Float grid (as long as your targeted browsers support flexbox).

.off-canvas-wrapper {
    overflow: visible;
}

.off-canvas-content {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

header, nav, footer {
    flex-shrink: 0;
}

main {
    flex: 1 0 auto; /* Use 1 0 auto instead of just 1 for backwards compatibility with other browsers */
}

Explanation: The off-canvas-wrapper overflow is needed due to the way the scrollbar is hidden by foundation's off-canvas-wrapper structure (if you are not using off-canvas and just a container div, you don't need this line). To start, we give the "container" div (off-canvas-content) a display of flex, a direction of column (for a conventional top to bottom page layout -- but you could try "row" for a funky left-to-right layout), and a 100 height viewport to always make the height equal to 100% of the browser window. Finally, we give the header, nav, and footer a flex-shrink of 0, but the main gets a flex of 1 (which also gives it a flex-grow of 1) so that it "grows"/expands the container to the browser window height.

Full credit to Philip Walton's Flexbox CSS Article for the flex CSS. I simply took his CSS and applied it to the foundation wrapper structure.

I hope this helps,

Roy

 

Michal Pandyra 7 days ago

Hi Roy,

Thanks for sharing. An elegant solution to an age-old problem! Thanks for taking the time to work it into Foundation's wrapper structure.