How to keep your footer at the bottom of the page

In this tutorial I will show you how to keep your footer at the bottom of the page, even if you have little content. The beauty of this is that it uses no hacks. Just plain CSS.

First thing's first...let's get a scenario going so you can see what I mean.

I want to keep my footer in its place

Suppose you have a website that's pretty normal in respect that sometimes you have lots of content on a page, and other times, you don't. When there isn't much content, you may notice that the footer doesn't stay at the bottom of the screen, and shoots up to sit underneath the content. You could try giving your content a min-height to make it longer, like min-height:800px, but this isn't a very practical way of overcoming the problem.

For this exercise I will be using a full page layout, i.e., my content will stretch to fill the screen. If you want to work with definite measurements, substitute width:100% for whatever value you need.

Let's get going!

To make this work we need to apply some nifty CSS to our footer, html tag, body and our containing element. Here's the code:

Example of keeping the footer at the bottom of the page

CSS Code:

        html, body {
        	height:100%;
        	margin:0;            
        }
        body {
			font:90% Verdana, Geneva, sans-serif; /* For demonstration purposes */
		}
        #container {
        	min-height:100%;
        	position:relative;
        	background-color:#66CCFF; /* For demonstration purposes */
        }
        #main {
        	height:100%;
        	overflow:auto;        	
        	clear:both;
        }
        #footer {
        	position:absolute;
        	background-color:#FF6633; /* For demonstration purposes */
        	bottom:0;
        	width:100%;            
        }
        

(X)HTML Code:

Our layout consists of a container called container, which houses a div called main and another div called footer.

        <div id="container">
        	<div id="main">My main content.</div>
        	<div id="footer">My super, brilliant, cool, amazing, special, awesome, flashy, spectacular footer!</div>
        </div>

        

Result with very little content:

Click here to view the result with very little content.

Result with lots of content

Click here to view the result with lots of content.

Footer height

If you wish to give your footer a height, remember to add this figure to the bottom padding of the element above it — in our example, the main div — otherwise the footer will overlap the element above.

Simply put, If you decide your footer must be 80px in height, make sure you add 80px to the bottom padding of the element above.

Example of giving the footer a height

CSS Code:

         #footer {
        	position:absolute;
        	background-color:#FF6633; /* For demonstration purposes */
        	bottom:0;
        	width:100%;   
            height:80px;         
        }
        
        #main {
        	height:100%;
        	overflow:auto;
        	font-size:150%;
        	clear:both;
        	padding-bottom:80px;
        }
        

Result:

Click here to view the result.

Explanation

By giving the html and body a height of 100% we are telling them to expand vertically to fill the screen. Giving our container a min-height of 100% ensures that it doesn't become smaller than the screen. Now, adding bottom:0 to our absolutely positioned footer, ensures that it always stays at the bottom of the page.

Margins

Just a word on margins. You must make sure that your margins are set to zero in the html and body, otherwise this will happen:

Arghh! scrollbars!!

Unwanted scrollbars will appear! This is because the container fills the screen so when the body's margins aren't set to zero, they contribute to the space on screen, causing the content to become too big. Remove the margins and the content fits like a glove.