CSS sticky footer

A number of web site designs require the page footer to stick to the bottom of a page, no matter the content. There are other solutions but after using a min-height solution for a number of years i have found it to be the most robust.

The increasing maturity of the browser market means the CSS has simplified to using min-height only. There are alternative solutions for min-height support using JavaScript, alternatively should the CSS fail it should not cause a significant issue to site usability.

The Objective:

Position the footer element so that it is at the bottom or below the viewport irrespective of the content.

The Solution:

The footer element will be positioned in the padded area of the previous sibling element using negative margin.

To achieve this the parent elements (html, body, #page) must be set to 100% height. The previous sibling element (#page-group) must be set to a min-height of 100% and then given a padding equal to the size of the footer element (#footer) plus any additional padding needed for the design.

This will push the vertical space of those elements beyond the viewport to the amount of padding applied. Use a negative margin to bring the footer element back within the viewport, unless the total content is greater than the viewport to start with.

The CSS:

html,
body,
#page {
  height: 100%;
}
#page-group {
  min-height: 100%;
}
#content {
  padding: 0 0 50px;
}
#footer {
  margin: -50px 0 0;
}

The HTML:

<!DOCTYPE html> <html lang="en-GB" dir="ltr"> <head> </head> <body> <div id="page"> <div id="page-group"> <header id="header" role="banner"> </header> <div id="content"> <div id="main" role="main"> </div> <aside id="aside" role="complementary"> </aside> </div> </div> <footer id="footer" role="contentinfo"> </footer> </div> </body> </html>

2 Responses to CSS sticky footer

Comment on CSS sticky footer

Your email address will not be published.

You may use these HTMLtags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>