Fluid Height Sticky Footer

A sticky footer is one which never comes any higher than the bottom of the browser viewport. When the page content is too long to fit in the viewport then the footer behaves normally by staying below the rest of the page content but on any page where the content is short enough to not fill the viewport the footer sticks itself to the bottom of the viewport rather than staying directly below the rest of the content.

The best sticky footer CSS that I have found was created by Paul O'Brien (author of "The Ultimate CSS Reference". He apparently first write CSS to create a sticky footer way back in 2002 and has created a number of newer variants to make use of CSS supported by modern browsers that make the process simpler. While the CSS that Paul's example provides includes workarounds for older browsers, the part that I am going to examine is section of the code that provides the sticky footer functionality for modern browsers.

Disregarding the parts of the code necessary for clearing any default margins and padding and the code to style the appearance of the header and footer we basically end up needing just four CSS commands to set up a sticky footer.

html, body,#wrap {height:100%;}
#wrap {display:table;}
header, .footer, main { display:table-row }
header, .footer{height:1px}

The first thing we need to do is to set a 100% height on the html and body tags as well as on a wrapper that will contain the entire page. This ensures that the page content can be stretched to fill the entire viewport.

The second command sets the wrapper to display:table. A table with 100% height will actually use that as the minimum height of the table and so the page will always fill the browser unless there is sufficient content to overflow the viewport in which case that 100% height effectively gets treated as the minimum height.

This allows us to specify the third command that sets the header, main content and footer to display:table-row which ensures that between them they will fill the entire height of the table so that the footer will always extend to the bottom of the viewport unless the page has sufficient height to push it down even further. Note that you can use tags, ids or classes to identify these - the example illustrates one of each but normally you'd pick one of the three alternatives.

The final command sets the height of the header and footer (the first and last rows of our table) to a height of 1%. Again sa with the 100% height for the table this gets treated as a minimum where the content of those rows is sufficient to exceed that height (which it usually will be if you put anything in the header or footer at all). What it does though is to ensure that where the height of the header, content and footer are less than the viewport height that it is the content that gets the empty space added to it to make the table fill the viewport.

Four simple commands to produce a sticky footer that works properly in all modern browsers. All of the additional code added in the CSS is either to style the page content in ways that have nothing to do with the sticky footer functionality or are to provide fallbacks for antiquated and now long dead browsers that did not support display:table and display:table-row.

 

This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow
Donate