3302 2 January 13, 2015

Sticky footer revisited

I know, this topic is on since at least 10 years – but… Surprisingly this still is a pain in the neck of many developers. Or at least my neck. I have been using lots of techniques, mostly coded by myself a long time ago, and I decided to do a small research to find out is it possible to make it easier and faster than I currently do (I’d have to updated my code library, but everything needs dusting from time to time), but most important – to check if this is really worth the effort.

For those who don’t know: sticky footer is…
Sticky footer website design stats
First of all, I’ve checked 150 randomly selected websites from 2 css galleries. They were posted as state of the art websites, and I quite liked them, so I am talking here about the modern, up to date web design.
Much less than I thought, 33 out of those 150 websites had sticky footers, which gives us 22%. Further, any sticky footer method or technique was not applicable to 45 out of the remaining 117 websites (they were horizontally scrolling, had no footer at all, were fixed at the screen size or used another unusual layout). It made me realize that the problem, which I always had on the brain is no longer crucial. Boosting usage of whitespace combined with development of content marketing caused the websites are usually much longer than screen height, so there is no need to keep the footer sticky. The tendency to use unconventional layout and navigation arrangements made them obsolete in 30% cases. For those of you, who would like to make their footers sticky regardless of this stats, I created a summary of known sticky footer methods.

Old school 100% body + min-height container with negative margin

This is one of the oldest methods, I have been using it since many years now (I think even more than ten). It works for fixed height footers only and is supported by all modern (and even not so modern) browsers. Here’s the code (html)

<!DOCTYPE html>
<head>
	<title>Sticky footer example</title>
</head>
<body>
<div id="container">
	<header>Header goes here</header>
	<p>Your content goes here</p>
</div>
<footer>Your footer goes here</footer>
</body>
</html>

And the CSS:

html, body { 	height: 100%; }
#container { 	min-height: 100%;
		height: auto !important;
		height: 100%;
		margin: 0 auto -100px;}
footer {	height: 100px;}

How does it work: Body spreads over the entire height of the page – full screen or longer if there’s more content on page. Div#container holding the page content is the key. It has a minimum height of 100% (so, if the content is short, it will anyway have the content of the viewport). If the content is longer than the viewport, min-height will not be used, and instead of it, browsers will use either 100% (internet explorer, older versions that don’t support !important directive) or auto (all other browsers) – which will result in full body height. Finally the negative bottom margin will make the space for the footer – 100px in this example. Footer has the height set to 100px, so it will fill the space perfectly (of course you could go with 50px height and 25px top and bottom padding – the result will be the same)

Modern clean CSS “Sticky Footer”

As proposed at mystrd.at – the simplest and easiest solution I’ve ever seen. Without any additional markup, and with surprisingly easy CSS. Also works only for fixed height footers.

<!DOCTYPE html>
<head>
    <title>Clean and simple sticky footer</title>
</head>
<body>
    <header>Your header goes here</header>
    <main>Content goes here</main>
    <footer>Footer goes here</footer>
</body>
</html>

CSS for this example:

html {		position: relative;
			min-height: 100%; }
body {		margin: 0 0 100px; /* bottom = footer height */ }
footer {	position: absolute;
	    	left: 0;
    		bottom: 0;
    		height: 100px;
    		width: 100%; }	

How does it work: Body bottom margin doesn’t allow the content to fill the bottom XX pixels of screen (100 pixels in this example). Footer is positioned absolutely at the bottom, and fills the whole available space.

The downside of this solution, as well as the previous one, is that the footer has got the fixed height. What can developer do if the footer includes dynamic content (like for example facebook or twitter feed)? The only CSS solution I found for a sticky footer with a dynamic height is:

Table hack

Table hack involves using display: table and display: table-row CSS properties. This makes the divs to behave like an html table (although they are not a table, so the HTML semantics is saved!). Still this solution is considered an abuse of CSS by some of the developers. Code for this solution will look like:

<!DOCTYPE html>
<head>
    <title>Table hack: sticky footer with dynamic height</title>
</head>
<body>
    <header>Your header goes here</header>
    <main>Content goes here</main>
    <footer>Footer goes here - Dynamic height</footer>
</body>
</html>
html, body { height: 100%; }
 
body { 	display: table;
		width: 100%; }
 
header, footer { display: table-row;
		 		height: 1px; }
 
main { 		display: table-row;
			height: 100%; }

This solution works great for all the browsers above IE7, and the only flaw is that some developers regard it a “hack” and unclean technique (it bothers me a little bit).

Ockham’s razor solution

Some time ago when I was driven to the wall I have used a very simple solution, which is not perfect, but works quite well if you are able to estimate how much content will go to the main content part and the footer. The html is the same as previous, so I post CSS here only:

html, body { height: 100%; }
main { 	min-height: 70%; }
footer { min-height: 30%; }

It will give a little scrolling if there is little main content and the footer exceeds the assumed 30%, but otherwise it works great, and the simplicity of this layout makes it worth considering at some occasions.

If none of the above examples works for you, and you don’t worry about browser support, you can solve it with flexbox. And there’s always javascript (but that’s the topic for a separate post). Please let me know in comments if I missed any of the ways of getting the footer stick to the bottom.

2 comments on “Sticky footer revisited

  • July 30, 2015 at 10:59 pm   James says:

    How about this? Super Clean…Not dependent on the html or body, nor a container div.

    No width declaration either.

    CSS
    .sticky-wrap {
    position:fixed;
    top:100%;
    right:0;
    left:0;
    bottom:0;
    margin-top:-30px; /* Height */
    z-index:9999;
    background-color:rgba(0,0,0,0.90);
    }

    HTML

    Reply
  • September 10, 2016 at 5:49 pm   CSS Sticky Footer says:

    Works great…made a similar example on my blog. Thanks for solution.

    Reply

Leave a Reply