Tips and Tricks - Pure CSS Sticky Footers

November 6, 2012

By now, if you've seen my other blog posts, you know that I'm fascinated with how much JavaScript has evolved and how much you can do with jQuery these days. I'm an advocate of working smarter, not harder, and that maxim knows no coding language limits. In this post, I want to share a pure CSS solution that allows for "sticky" footers on a web page. In comparing several different techniques to present this functionality, I found that all of the other routes were overkill when it came to processing time and resource usage.

Our objective is simple: Make the footer of our web page stay at the bottom even if the page's content area is shorter than the user's browser window.

This, by far, is one of my *favorite* things to do. It makes the web layout so much more appealing and creates a very professional feel. I ended up kicking myself the very first time I tried to add this functionality to a project early in my career (ten years ago ... already!?) when I found out just how easy it was. I take solace in knowing that I'm not alone, though ... A quick search for "footer stick bottom" still yields quite a few results from fellow developers who are wrestling with the same frustrating experience I did. If you're in that boat, fear no more! We're going to your footers in shape in a snap.

Here's a diagram of the problem:

CSS Footer

Unfortunately, a lot of people try to handle it with setting a fixed height to the content which would push the footer down. This may work when YOU view it, but there are several different browser window heights, resolutions and variables that make this an *extremely* unreliable solution (notice the emphasis on the word "extremely" ... this basically means "don't do it").

We need a dynamic solution that is able to adapt on the fly to the height of a user's browser window regardless if the resize it, have Firebug open, use a unique resolution or just have a really, really weird browser!

Let's take a look at what the end results should look like:

CSS Footer

To make this happen, let's get our HTML structure in place first:

<div id="page">
 
      <div id="header"> </div>
 
      <div id="main"> </div>
 
      <div id="footer"> </div>
 
</div>

It's pretty simple so far ... Just a skeleton of a web page. The page div contains ALL elements and is immediately below the

tags in the page code hierarchy. The header div is going to be our top content, the main div will include all of our content, and the footer div is all of our copyrights and footer links.

Let's start by coding the CSS for the full page:

Html, body {
      Padding: 0;
      Margin: 0;
      Height: 100%;
}

Adding a 100% height allows us to set the height of the main div later. The height of a div can only be as tall as the parent element encasing it. Now let's see how the rest of our ids are styled:

#page {
      Min-height: 100%;
      position:relative;
}
 
#main {
      Padding-bottom: 75px;   /* This value is the height of your footer */
}
 
#footer {
      Position: absolute;
      Width: 100%;
      Bottom: 0;
      Height: 75px;  /* This value is the height of your footer */
}

These rules position the footer "absolutely" at the bottom of the page, and because we set #page to min-height: 100%, it ensures that #main is exactly the height of the browser's viewing space. One of the best things about this little trick is that it's compliant with all major current browsers — including Firefox, Chrome, Safari *AND* Internet Explorer (after a little tweak). For Internet Explorer to not throw a fit, we need concede that IE doesn't recognize min-height as a valid property, so we have to add Height: 100%; to #page:

#page {
      Min-height: 100%;  /* for all other browsers */
      height: 100%;  /* for IE */
      position:relative;
}

If the user does not have a modern, popular browser, it's still okay! Though their old browser won't detect the magic we've done here, it'll fail gracefully, and the footer will be positioned directly under the content, as it would have been without our little CSS trick.

I can't finish this blog without mentioning my FAVORITE perk of this trick: Should you not have a specially designed mobile version of your site, this trick even works on smart phones!

-Cassandra

Comments

November 7th, 2012 at 5:56am

Nice trick, very useful, thank you!
Arvy, Sao Paulo, Brazil

November 21st, 2012 at 12:34pm

worked like a charm! after trying others that didn't~

November 27th, 2012 at 8:27am

Really nice trick. Will used in live projects!

 

January 11th, 2013 at 4:26pm

Thanks, but still not good for responsive design (position absolute...). Regards.

January 11th, 2013 at 5:36pm

What do you mean, Sasha? It's "position:absolute" specifically because it's supposed to stick to the bottom of the page ... The bottom of the page is always at the bottom of the page, so why would "position:absolute" be a problem?

January 13th, 2013 at 9:46pm

Can't seem to make this work on Chrome -,- too bad for me :/

January 23rd, 2013 at 8:42pm

kevin hazard, because there is a missing position:relative; on the #page

January 25th, 2013 at 9:11am

Thanks for the tip, airtonix. As we put this together and tested it, the position:relative; didn't appear to be necessary, but including it does appear to improve browser compatibility.

February 9th, 2013 at 12:27am

I'm also running Chrome and wasn't able to get this working properly. Were you guys able to get it working in Chrome correctly? Would love to know if the problem is on my end or not. Thanks.

February 28th, 2013 at 11:28am

Hi all! I've noticed an overwhelming positive response to this trick in particular, and have also noticed a lot of Chrome users having issues. I am re-evaluating this snippet to make it cross-browser friendly and will post an update soon!

March 7th, 2013 at 5:00am

As someone mentioned earlier, position absolute is not a good solution for a sticky footer. If you add enough content in main that causes the page to scroll, the footer will remain in it's location at the bottom of the screen (similar to a fixed footer) and the content will go behind. If you scroll the page, the footer will stay in its absolute position and actually move up the page, always blocking the same portion of main's content.

Simply put, the footer will not be pushed down below the content if the content are is taller then the viewport height.

 

March 27th, 2013 at 8:30am

Good Call Rockit! Much better!

April 4th, 2013 at 2:52am

dosen't work in IE10 standard mode..

April 8th, 2013 at 10:44am

Nice tricks to stick with for pure CSS sticky footers. Thanks for sharing this with us!

Angel

May 25th, 2013 at 8:36am

THANK YOU CASSANDRA!

June 8th, 2013 at 8:22am

Thanks Cassandra. I like the way you explained that - it was very clear.

June 15th, 2013 at 6:34pm

Hi there.
First of all thanks for the post.
Secondly, after searching a lot about the matter (sticky footer), I came across your solution but I seem to be having a similar issue to some other versions I've found over the web. When the content of the 'main' div isn't enough to fill the whole page, it does work as intended and the footer sticks to the bottom of the page. However, when the 'main' div has content that makes it's height exceed the viewport's height, the content simply "pierces" through the 'footer' div and keeps on going down.
Any tips on having the footer stay at the "absolute" bottom of the page, rather than the bottom of the viewport?

Thanks in advance.

June 23rd, 2013 at 8:32pm

Awesome, it works!

August 22nd, 2013 at 8:30am

This works perfectly! Thank you :)

August 28th, 2013 at 7:28pm

Thanks, very good & simple solution!

September 11th, 2013 at 9:13am

Thanks so much Cassandra. Wasted pretty much a whole day trying to figure this out till I cam across your site! Best, Doc D.

September 18th, 2013 at 3:47am

sound great. but can't practice it smoothly..

When there are alot of conents, the footer won't go down..

September 25th, 2013 at 9:36am

Thanks for the very clear guide of how it is done!
It works! :)

October 1st, 2013 at 11:16pm

I'm having the same issue as Dean K and P. Silva in regards to content in the 'main div' not pushing down the footer to the bottom of the viewport once the content gets too long. Will this issue ever be resolved? Does anybody have other solutions?

November 8th, 2013 at 2:29pm

Cassandra,
I've been working on my first responsive site and couldn't get the footer to stay put. Thank you for the simple explanation! Now I won't have to think about it over the weekend. :)

December 11th, 2013 at 1:38am

This is finally a concise explanation

January 6th, 2014 at 1:24am

Thanks a lot!!!!!!!!!!!!!

Itz working fine....... :P

January 8th, 2014 at 9:58am

Hi,
I am trying to add a content area to this that has a white background and a fixed width, but needs to also expand to the full height of the browser window. I cannot get it to work as it will not expand at all unless I fill it with text enough that it then meets the footer.

Here is the code snippet for the content section:

#content {
margin:0 auto;
width: 804px;
min-height:100%;
height:100%;
background-color:#FFFFFF;
padding-top: 37px;
padding-left: 47px;
padding-right: 47px;
}

Can you help get it to work? Thanks in advance!
Amy

Leave a Reply

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • You can enable syntax highlighting of source code with the following tags: <pre>, <blockcode>, <bash>, <c>, <cpp>, <drupal5>, <drupal6>, <java>, <javascript>, <php>, <python>, <ruby>. The supported tag styles are: <foo>, [foo].
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
By submitting this form, you accept the Mollom privacy policy.

Comments

November 7th, 2012 at 5:56am

Nice trick, very useful, thank you!
Arvy, Sao Paulo, Brazil

November 21st, 2012 at 12:34pm

worked like a charm! after trying others that didn't~

November 27th, 2012 at 8:27am

Really nice trick. Will used in live projects!

 

January 11th, 2013 at 4:26pm

Thanks, but still not good for responsive design (position absolute...). Regards.

January 11th, 2013 at 5:36pm

What do you mean, Sasha? It's "position:absolute" specifically because it's supposed to stick to the bottom of the page ... The bottom of the page is always at the bottom of the page, so why would "position:absolute" be a problem?

January 13th, 2013 at 9:46pm

Can't seem to make this work on Chrome -,- too bad for me :/

January 23rd, 2013 at 8:42pm

kevin hazard, because there is a missing position:relative; on the #page

January 25th, 2013 at 9:11am

Thanks for the tip, airtonix. As we put this together and tested it, the position:relative; didn't appear to be necessary, but including it does appear to improve browser compatibility.

February 9th, 2013 at 12:27am

I'm also running Chrome and wasn't able to get this working properly. Were you guys able to get it working in Chrome correctly? Would love to know if the problem is on my end or not. Thanks.

February 28th, 2013 at 11:28am

Hi all! I've noticed an overwhelming positive response to this trick in particular, and have also noticed a lot of Chrome users having issues. I am re-evaluating this snippet to make it cross-browser friendly and will post an update soon!

March 7th, 2013 at 5:00am

As someone mentioned earlier, position absolute is not a good solution for a sticky footer. If you add enough content in main that causes the page to scroll, the footer will remain in it's location at the bottom of the screen (similar to a fixed footer) and the content will go behind. If you scroll the page, the footer will stay in its absolute position and actually move up the page, always blocking the same portion of main's content.

Simply put, the footer will not be pushed down below the content if the content are is taller then the viewport height.

 

March 27th, 2013 at 8:30am

Good Call Rockit! Much better!

April 4th, 2013 at 2:52am

dosen't work in IE10 standard mode..

April 8th, 2013 at 10:44am

Nice tricks to stick with for pure CSS sticky footers. Thanks for sharing this with us!

Angel

May 25th, 2013 at 8:36am

THANK YOU CASSANDRA!

June 8th, 2013 at 8:22am

Thanks Cassandra. I like the way you explained that - it was very clear.

June 15th, 2013 at 6:34pm

Hi there.
First of all thanks for the post.
Secondly, after searching a lot about the matter (sticky footer), I came across your solution but I seem to be having a similar issue to some other versions I've found over the web. When the content of the 'main' div isn't enough to fill the whole page, it does work as intended and the footer sticks to the bottom of the page. However, when the 'main' div has content that makes it's height exceed the viewport's height, the content simply "pierces" through the 'footer' div and keeps on going down.
Any tips on having the footer stay at the "absolute" bottom of the page, rather than the bottom of the viewport?

Thanks in advance.

June 23rd, 2013 at 8:32pm

Awesome, it works!

August 22nd, 2013 at 8:30am

This works perfectly! Thank you :)

August 28th, 2013 at 7:28pm

Thanks, very good & simple solution!

September 11th, 2013 at 9:13am

Thanks so much Cassandra. Wasted pretty much a whole day trying to figure this out till I cam across your site! Best, Doc D.

September 18th, 2013 at 3:47am

sound great. but can't practice it smoothly..

When there are alot of conents, the footer won't go down..

September 25th, 2013 at 9:36am

Thanks for the very clear guide of how it is done!
It works! :)

October 1st, 2013 at 11:16pm

I'm having the same issue as Dean K and P. Silva in regards to content in the 'main div' not pushing down the footer to the bottom of the viewport once the content gets too long. Will this issue ever be resolved? Does anybody have other solutions?

November 8th, 2013 at 2:29pm

Cassandra,
I've been working on my first responsive site and couldn't get the footer to stay put. Thank you for the simple explanation! Now I won't have to think about it over the weekend. :)

December 11th, 2013 at 1:38am

This is finally a concise explanation

January 6th, 2014 at 1:24am

Thanks a lot!!!!!!!!!!!!!

Itz working fine....... :P

January 8th, 2014 at 9:58am

Hi,
I am trying to add a content area to this that has a white background and a fixed width, but needs to also expand to the full height of the browser window. I cannot get it to work as it will not expand at all unless I fill it with text enough that it then meets the footer.

Here is the code snippet for the content section:

#content {
margin:0 auto;
width: 804px;
min-height:100%;
height:100%;
background-color:#FFFFFF;
padding-top: 37px;
padding-left: 47px;
padding-right: 47px;
}

Can you help get it to work? Thanks in advance!
Amy

Leave a Reply

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • You can enable syntax highlighting of source code with the following tags: <pre>, <blockcode>, <bash>, <c>, <cpp>, <drupal5>, <drupal6>, <java>, <javascript>, <php>, <python>, <ruby>. The supported tag styles are: <foo>, [foo].
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
By submitting this form, you accept the Mollom privacy policy.