2014 Sticky Footer Solutions

While working on a Drupal distribution of sorts that offers a number of different themes included, I needed to look for a clean, generic, reusable and inheritable Sticky Footer to be packaged in a base theme. The feature needed to be toggleable on or off in sub-themes as necessary.

Searching Google always turns up a number of competing solutions, so I’ve consolidated the research here in a list of 4 basic options presenting the pros and cons of each.

Pros:

Cons:

Pros:

Cons:

3. The CSS Flexbox solution.

Pros:

Cons:

4. A Javascript-based responsive solution.

Pros:

Cons:

Here is the above information condensed into a table format:

Solution Responsive Browser Support Pure CSS Clean (No hacks)
No Yes Yes
No; some non-semantic html is required.
Yes
Yes
Yes Maybe; some consider using display:tables-row is not good use of CSS.
Yes No Yes Yes
Yes Yes No Maybe; requires extra code to listen for screen resize and to restrict itself from overloading the browser.
If you liked this post, share it with your followers or follow me on Twitter.

Comments