Lean sticky footer in CSS with no wrapper

The term “sticky footer” seems a bit of a misnomer. The footer doesn’t “stick” to the bottom of the browser window and follow you around. Instead the desired effect is that the footer sits at the bottom of the browser window, even if there is not enough content to push it down. If there is enough content it will be pushed below the fold.

The following few lines of CSS do the work without the need for any extra wrappers:

html {
height: 100%;
}

body {
margin: 0 auto;
display: block;
display: table;
width: 100%;
min-height: 100%;
}

body > footer {
display: block;
display: table-row;
height: 100px;
}


A quick rundown of how it works:

• 100% height on the HTML element tells the browser that the height of the document is to be 100%
• The min-height on the body element tells the browser that the body, should at minimum, occupy the height of the browser window
• We set the display type to “block” for browsers that don’t support “display: table;”
• The CSS table display allows us to get some table-like behaviour out of regular CSS elements without affecting their semantic meaning. A consequence of this is that we need to specify a 100% width for the body
• We do a similar trick for the footer element, this time using “display: table-row;”
• If we left it there the background of the footer would come up to meet the top of the content, but the content of the footer would be at the top – so we assign it a fixed height such that the footer has a maximum size

You can see it in action in this jsfiddle. Tested so far it works in Chrome, Firefox and IE10+. Browsers that don’t support the “display: table;” property simply won’t have the footer stuck to the bottom of the page. And because there’s no hacky use of absolute positioning or negative margin, it shouldn’t conflict with any other markup.

Side note: this site is built using CSS3 felxbox. The implementation is more cumbersome and much more fiddly for older browsers. Using the approach of applying “display: table” to the tag should be the simplest way to achieve this effect.

Didn’t work for you? Let me know by tweeting @rickdzekman