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) |
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. |