Menu icon Foundation
Foundation 6 Sticky Footer (Pushed Down) 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 (pushed all the way down).

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" and pushed down to the bottom of the window.

 

Codepen (Live Example)

Here's the link to the Codepen using the bare-bones Foundation layout described below:

Codepen

 

Visual

Foundation Sticky Footer

  

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

 

Foundation6footerbottomoff-canvasflexflexboxxy gridfloat gridsticky footerpushed down

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 (pushed all the way down).

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" and pushed down to the bottom of the window.

 

Codepen (Live Example)

Here's the link to the Codepen using the bare-bones Foundation layout described below:

Codepen

 

Visual

Foundation Sticky Footer

  

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 2 months 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.

charlyRoot 1 day ago

Thank you very much for this. I thought I had sticky footers all figured with the new XY Grid out until I added enough content to exceed a vh100. Then the content just ran right through the footer without moving it. I thought I was so slick untill... It was very  YAYboo...  :(

I would love an XY Grid conversion of this. I use Panini so excuse the handlebars. I tried attaching your CSS to the native foundation grid classes but couldn't get the footer to stick AND my content to push the footer down. 

Mine works but I suspect there is a better way. Thanks Again for taking the time to share. You helped me out big time!  

 

Codepen (Live Example)

 

.v-jack {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.v-jack-bar,
.v-jack-nav,
.v-jack-footer {
  flex-shrink: 0;
}

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

/* All the below is optional CSS to help visualize and stylize */

body {
  font-family: "Montserrat", Arial;
  text-align: center;
}

.v-jack-nav,
.v-jack-footer {
  background: #444;
  color: #fcfcfa;
}

.v-jack-bar {
  margin: 24px;
  font-size: 20px;
}

.v-jack-nav {
  padding: 8px;
}

.v-jack-main {
  margin: 12px;
}

.v-jack-footer {
  padding: 16px;
}

.slider {
  width: 700px;
  margin-top: 20px;
}

#slider-result {
  background: #ca1f40;
}

 

<div class="grid-y v-jack">
  <div class="cell v-jack-bar">
    {{> top-bar}}
  </div>
  <div class="cell v-jack-nav">
    {{> nav}}
  </div>
  <div class="cell v-jack-main">
    {{> body}}
    <!-- Slider to adjust main's height -->
    <p class="help-text" style="margin-top: 1em;">
      Current Rectangle Height = <span id="slider-adjust">20px</span>
    </p>
    <div class="slider float-center" data-slider data-initial-start="1" data-end="100">
      <span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
      <span class="slider-fill" data-slider-fill></span>
      <input type="hidden">
    </div>

    <div id="slider-result"></div>

  </div>
  <div class="cell v-jack-footer">
    {{> footer}}
  </div>
</div>