Flexbox Sticky Footer

We’ve all heard of the famous sticky footer and of course there are 101 million ways to skin that cat (Example 1, Example 2, Example 3 …and so on). Let’s take a look at a way to do this same idea, but using Flexbox.

The idea is that we have a list of items that are treated as rows (à la inline-block w/out the headaches). These rows contain objects that sit on top of each other or what Flexbox likes to call “columns.” These objects within our row items have the ability to expand and contract to meet the highest height of their siblings. That means if one item’s content fills up the rest of the siblings match their height accordingly and keep content flush (think justified text).

See the Pen For Simon: Flexbox Sticky Footer by Dennis Gaebel (@grayghostvisuals) on CodePen.1395

To start we’re saying to the CSS gods “Take this container and it’s direct children and make them behave as a flexbox.” This enables a flex context for all the direct children. Here’s the code for such a request…

.row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

You’ll notice we’re also asking for a few other facets particularly “direction” and “item alignment.” The direction value says “Make the containers children span equally in a row horizontally then make their height stretch to fill the container.”

Now that we have the items displayed equally as a row, its time to make the adjustments for the content. In order to pull this off we need to set the children’s container as a flexbox context then flex these child objects within the parent container an equal amount of space and finally set our layout direction as columns. All that mumbo jumbo looks like this in code land…

.item {
  display: flex; // set the context
  flex: 1; // flex an equal space for the entire container sire.
  align-items: stretch; // make my junk stretch the complete height sir mixalot.
  flex-direction: column; // stuff can't be a row. gotstah be a column.
}

This last bit of magic is the real trickery in making the text sit at the bottom all the time even when content is added or subtracted to any of the siblings. The main ingredient here is the align-items property which is set to flex-end. Before I get too far ahead of myself let me explain starting from the top of the declaration block with the following code…

.text-bottom {
  display: flex; // set the context
  flex: 1; // flex an equal amt of space yo!
  align-items: flex-end; // make that shit sit on the bottom dawg.
  justify-content: center; // center the text horizontally suckah. the poor man's text-align: center
}

Since we have our text inside a container (div.text-bottom) we can declare it’s display as a Flexbox context and then manipulate it’s contents (the direct children) with Flexbox powers.

With our container’s context set as Flexbox (div.text-bottom), we can move the text to the bottom of the container by using the align-items property. The value flex-end allows the child of this container (div.text-bottom) to begin at the bottom or in other words the end of the Flexbox direction (up and down). Since we’re using columns for our layout direction we have to remember that the flex direction is now vertical instead of horizontal; hence the reason flex-end moves the text to the bottom of the container.

This implementation is something you’ll want to adjust to fit your needs and isn’t the “be all end all” for sticky footer layouts, but make no mistake it’s a powerful way to make your junk sit at the bottom of a container indefinitely. If you happen to spot a fix or have a suggestion let me know in the comments or hit me up on Twitter.

GrayGhost

Web Development & Design, Technical Writing, Interaction Design, Open Source Maker & Contributor. Helping Create A Better Web. http://grayghostvisuals.com.
  1. ❧ Cristian shouted:
    2015/04/18 • 10:13 pm

    How do you avoid the footer overlapping content above it?

    For example, in Chrome, IE and Opera if you shrink the viewport vertically the footer and it’s content ignores other content and overflows it. Firefox is the only browser that collapses the footer if it’s about to overflow above content.

    I got my test site here http://mnrb.dk/template-1-test

    Kind Regards,
    Cristian

  2. Hey Christian,

    I would say there appears to be a discrepancy between browsers. Might need to bring this issue to them in order to gain some clarification on why the difference or wait and see what happens with the flexbox standard.

  3. Thanks for the reply. I played with the sticky footer some more and gotten further from my last reply. The footer no longer collapses itself in IE, Firefox and Chrome, the footer also doesn’t overflow content above it when shrinking the viewport vertically in Firefox and IE.

    Though the footer gets overflown (ignored) in Chrome with elements being written on top of it. I haven’t figured that part out yet.

    If you have any thoughts I would love to hear them. I’m trying to find a solution with the help from SO, but not so successful as of yet. http://stackoverflow.com/questions/29733831/foundation-5-sticky-footer-working-example-but-has-bugs-to-iron-out

    Kind regards,
    Cristian

Leave a Reply

Your email address will not be published. Required fields are marked *

show formatting examples
<pre class="language-[markup | sass | css | php | javascript | ruby | clike | bash]"><code>
…code example goes here…
</code></pre>

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Comment Preview

  1. John Doe shouted this comment preview:
    2014/07/24