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.

1. The Classic CSS Sticky Footer (html5 version here):

Pros:

• CSS/HTML only.
• No javascript or extra HTTP requests needed.

Cons:

• Requires the footer height be known, and set to a fixed value in CSS.
• Requires non-semantic HTML code structure changes.
• Doesn’t work well when using dynamic content such as from a CMS.
• Doesn’t work well for responsive designs, where height may change dynamically based on contents and width of screen.

2. A Responsive Sticky Footer CSS solution using display:table-row

Pros:

• Don’t need to know the height of the footer.
• Is a responsive solution.

Cons:

• Could be considered a hack, due to CSS use of display:table-row.
• Can cause layout/display issues or break the site design of some sites, requiring more time and attention to fix.

3. The CSS Flexbox solution.

Pros:

• Zero HTML code changes required.
• Very little CSS code (5 or 6 lines).
• Snappy response time and no display issues (requires no JS event listeners or processing).
• Could be the best choice as a progressive enhancement if stakeholders are willing to accept limited browser support.

Cons:

• Flexbox still has rather poor browser support,, many current browsers still require vendor prefixes.
• Would require a fallback solution for supporting IE9 and below.

4. A Javascript-based responsive solution.

Pros:

• Encapsulated solution - contained in a single javascript file, may be placed in the base Casa theme, and then automatically inherited (or specifically disabled) by any sub-theme.

Cons:

• Performance - extra HTTP requests.
• Maintainability - Adds more jQuery/javascript bloat.
• Hacky - Requires extra code to listen for screen resize, and to restrict itself from overloading the browser.

Here is the above information condensed into a table format:

Solution	Responsive	Browser Support	Pure CSS	Clean (No hacks)
Classic CSS Sticky Footer	No	Yes	Yes	No; some non-semantic html is required.
Responsive Sticky Footer CSS solution using display:table-row	Yes	Yes	Yes	Maybe; some consider using display:tables-row is not good use of CSS.
CSS Flexbox solution	Yes	No	Yes	Yes
A Javascript-based responsive solution	Yes	Yes	No	Maybe; requires extra code to listen for screen resize and to restrict itself from overloading the browser.