A Sticky Footer Alternative, the 100% Footer

Sticky Footers

I get designs sent to me all the time that make use of the illustrious sticky footer. A sticky footer is a site footer that remains at the bottom of the page and preferably below all your other content.

There are 2 main sites that have tutorials on the sticky footer so I included them here.

The Issue

I tried both of those but somehow I always ran into problems. The main issues I was having is that both of those were not made for responsive web design since in responsive layouts we can’t tell the exact height of the footer since it changes based on the width of the screen.

I found a few ideas that required a bit of Javascript to make the responsive footers work but they always gave me issues so I quickly Xed those.

The Idea

I had an idea though, instead of making a footer stick to the bottom of the screen I wanted the footer to simply display where it should at the bottom of the main content on my screen but I wanted the footer to extend to cover the rest of my screen. I use 2 monitors and I keep one landscape and one in portrait. The landscape one pretty much always shows the footer in its proper place however the portrait monitor tens to show large spaces underneath the footer on most sites.

Thus, allow me to introduce the 100% Footer. It works really well and there is no need for fancy HTML5 or any CSS3 at all so it will work almost everywhere.

Here is how it works. Its pretty easy.

Here is what we are going to do. I want a design that has a header, section, and a footer each with three columns. Once you see it you can change anything you want to about it. I always like to use the 1,000 pixel grid to keep my math easy and use more real estate.

Sticky Footer Alternative the 100% Footer

In essence what is happening is that you are making a div to be the wrapper for the entire site that will also work as the continuation of the footer. Here is the same layout but I changed the color of the footer to red so you can see where the footer itself ends and the body background color takes over.

sticky-footer-alternative

The CSS that really makes this happen is this:


html, body{
  margin:0;
  padding:0; 
  height:100%;
}
.wrapper{
  height:auto !important; 
  min-height:100%; 
  height:100%; 
  width:100%; 
  max-width:1000px; 
  margin:0 auto; 
  background:#333;
}

I do have another way of getting this done that does require quite a bit more CSS. I’ll save that for another post.

Take the code, use it, love it, hate it, whatever you like but if you do use it let us know about it.

By: on Aug 19
Cateogry: Responsive Web Design
Tags: , , ,

Contact

We are ready to handle any of your web needs. Use the form below to contact us and we'll get back with you in a timely fashion.

If you would like to setup a meeting, we can come out to your place no matter where you are.

Name*

Email*

Message