Use CSS to pin the footer to the bottom of the browser's viewport.

Introduction

Pinning the footer to the bottom of the browser's viewport has been a challenge that many people seem to encounter when using CSS. It keep quite a task to come up with a solution that works across all major browsers and versions. The particular setup I use I've been using for quite awhile. I find it reliable and hopefully it will help you resolve this issue for yourself.

First, I'm going to show you the markup I use. It will consist of two div elements. The first one will have its class attribute set to "container" and the second one "footer." I've added some text to each so as to distinguish them in the output. Below is the markup and an image of what this looks like in Firefox (my favorite browser to work with).

All we see is the text in the previous image. I am next going to setup some styles in the head of the page. The first style I will set for each class is the background color. Naturally, a background color is not necessary to make the footer pinned but I am going to use color to help visualize how the settings we add change the appearance. Below is the markup for the style rules.

So with these two rules in place we simply have a red section on top of a yellow section. The next step I want to take is to remove all the white space around the top and sides of the elements. Why do I want to do that? Every browser has slight differences in the default settings for properties. I prefer to set the defaults myself so that they will match across all browsers. In order to accomplish this I will set the margin and padding for the html, body and form elements to zero. I included the form element in this as asp.net pages place controls inside a form element which can affect the display. You don't need to include the form element if you don't have that element in your page. I will also do the same for each of our classes. I will explain the reason for that later on. Below is the new style rules and an image reflecting the changes.

Notice all the white space has been removed from the tops and sides. The next thing we want to do is force the top section to take up the entire height of the viewport. Set the height of the container class as well as the html, body and form to 100%. We will also change the display property for the container to table.

So what's happened here. Well first off you notice the container class isn't taking up the whole width. This happened because we set the display to "table." Tables by default do not take up the full width like divs do. So we need to explicitly set the width to 100%.

Now the container is taking up the whole viewport. Excellent! Only where's the footer you ask. Well at the moment it's displayed below the container which is why we have the vertical scroll bar showing. If you change the size of your browser window you'll notice that the scroll bar stays visible. This is because no matter what size the window the container is always going to have a height at least as much as the viewport. So the trick we need to display the footer requires three style rules. First let's give the footer a height. Say 50 pixels. Now in order to display it we need to have it overlay the container. How do we accomplish that? Simple - give the container a negative bottom margin. Yes, you can do that and in this case will give it a -50 pixel bottom margin to match the height of the footer. And the third rule - in order to make sure the footer appears over the container we will increase its z-index property to say 100 to make sure it's always visible.

Looks like we've got it! Fantastic! Oops... Not quite. This is working now for our example but if you add some content you'll run into some issues that need to be addressed. In order to illustrate this I will add 10 paragraph elements with corresponding numbers.

If you reduce the height of the window so that you need to scroll in order to see everything you may notice that the footer is covering up some of the content. This is because adding a negative bottom margin may have allowed the footer to move up it didn't change the padding for the content. Unfortunately, because we change the display of the container to "table" giving it padding at the bottom won't be effective. So what we have to do is add another div element inside the container but around the content. I will assign a class to this element called "innerContainer". I will also add bottom padding to this element of 50 pixels - equal to the height of the footer.

Now we're making progress. We've got a footer that pins to the bottom when the content doesn't take up the whole area but also moves down appropriately when the content does take up more area than available. Good job you've got a pinned footer. Wait just a second. Try looking at this same page in IE 7 and make sure the size of the window is such that you need to scroll and then scroll to the bottom.

No good! This doesn't work quite right with IE 7. The footer acts as if it's getting positioned absolutely. This is a bug having to do with setting the height of the container to 100%. Instead we need to remove the height setting and add a min-height rule only for IE 7. Thankfully we can do just that. Below is how the style rules will look with this addition.

Notice the part of IE 7 is commented out. The rest of the browsers will ignore this area but IE 7 will pick up on this and remove our previous height setting but add the min-height property.

Conclusion

There you have it. Using three elements and a few simple classes we have managed to pin the footer to the bottom. Enjoy!