The sticky footer…
The oh-so-sought-after expanse at the bottom of the page that contains contact information, site navigation, a call to action, or whatever else you might want to chuck in there. It’s the element that knows its place in the world (wide web) and embraces it by staying in it’s place. A well executed sticky footer encourages your site visitors to further engage; it encourages your site’s visitors to interact with your page’s content in a familiar and enjoyable fashion.
Fortunately, creating a sticky footer isn’t really all that difficult. In the following tutorial, I’ll show you a couple quick and simple methods for making a slick looking sticky footer, one that plays well with the modern web… one that deftly displays valuable information across varying screens and multiple devices. Best of all, I’ll show you how to create your footer in a relatively simple fashion in which you won’t need to mess with unnecessary libraries, fancy plugins, or less than desirable “hacks.”
Step 1: Behavior and Positioning
First things first, you’ll want to decide how your sticky footer will be displayed; i.e., how it will behave on your page. For the purposes of this tutorial, I’ll assume there are generally two choices for you with respect to your footer’s behavior: 1) your footer can stick to the bottom of the body of your page, changing position according to your page’s body’s height, or 2) it can stick to the bottom of your browser’s window, effectively rendering the footer as an omnipresent entity on the page. Both are relatively easy to achieve and have specific advantages and disadvantages when compared to the other. Ultimately the choice is yours.
Here’s how to stick the footer to the bottom of the body:
Things to note: 1) the body has
relative positioning 2) the sticky footer has
absolute positioning and a defined width 3) the
bottom property for the sticky footer is set to
Here’s how to stick the footer to the bottom of your browser window:
Things to note: 1) the body still has
relative positioning 2) the sticky footer now has
fixed positioning and a defined width 3) the
bottom property for the sticky footer is still set to
With both approaches, using relative units (i.e., percentage or viewport units) will allow for your footer to respond to various screen widths.
Like I said, pretty simple It really doesn’t take much more than that to create a pure CSS, simple sticky footer. But of course, we want more… Let’s take a look at getting some content in there.
Step 2: Add Some Content
So you’ve got your footer… stuck to the bottom of your page or your browser’s window… Let’s flesh it out some more with some useful information. For the purposes of this demo, I’m going to go with a mock site navigation block, a contact information block, and a call to action button.
Here’s the populated sticky footer:
Things to note here: 1) the sticky footer’s
text-align property is set to
center 2) div elements within the footer with
display:inline-block are being used as containers 3) relative units and min- and max-widths are being used.
Aligning the text to the center and giving the containers a display of inline-block just creates a nice alignment for the content. The min and max widths further control spacing and wrap behavior; the relative units assist here as well. Next, let’s look at classing things up a bit.
Step 3: Add Some Effects
Things are looking good! You’ve got a well populated sticky footer with information balanced throughout. It’s easy to read and easy to access and it looks good across multiple browsers and multiple devices. Great! But let’s say we really want to draw in some visitors. What can we do? We can add some fancy schmancy effects to our footer, that’s what we can do! 🙂 Let’s take a look at a few relatively simple effects that you can add to your footer in order to really draw attention to it.
If you want a relatively modest approach, there are shadow effects.
A more modern approach may be to let the background shine through.
How about some interactivity?
Let’s really get their attention!
And just to take it back to a world wide web of yesteryear…
With effects, your own creativity is the limit!
In this tutorial, I showed you how to make a relatively simple sticky footer without needing to rely on any external libraries or unsavory methods. I showed you how to stick your footer to the bottom of your page or to the bottom or your browser’s window. I showed you how to get basic responsiveness going and how to fill your footer with content. We then looked at some neat effects that hopefully gave you some inspiration of your own. That concludes this tutorial on creating a simple sticky footer. Thanks for sticking with it!