The Perfect Sticky Footer

It sticks to the bottom of any window, especially when there isn't enough content to fill the screen! It doesn't overlap content! Unlike most fixed and absolutely positioned footers, this one stops at the bottom of the content & the scroll bar kicks in! It's purely HTML & CSS, no javascript required! It should work in all browsers, but don't quote me on that I haven't been able to test it in IE yet! Check it out!

by Ryan Perez

HTML

<!------------------------------------------------ 
ATTENTION!
--------------------------------------------------
All you need for this Sticky Footer to work 
is a wrapper or container div (containing both
the content & footer), a content div (containing
whatever you want), & a footer div (make sure it
is outside of the content div, but inside the
wrapper or container div). In other words this:

<body>
    <div id="wrapper">
        <div id="content">Hello</div>
        <div id="footer"></div>
    </div>
</body>

is all you really need. I just added the h1, ul,
& descriptions to give this fiddle a little 
context & make it look pretty.
------------------------------------------------->

<body>
    <div id="wrapper">
        <div id="content"><!--ATTENTION! You can delete, edit, or swap out anything within the content div with your own content, BUT DON'T DELETE THE CONTENT DIV!-->
            <h1>The Perfect Sticky Footer</h1>
            <ul>
                <li>It sticks to the bottom of any window, especially when there isn't enough content to fill the screen!</li>
                <li>It doesn't overlap content! Unlike most fixed and absolutely positioned footers, this one stops at the bottom of the content & the scroll bar kicks in!</li>
                <li>It's purely HTML & CSS, no javascript required!</li>
                <li>It should work in all browsers, but don't quote me on that I haven't been able to test it in IE yet!</li>
                <li>Try resizing this window!</li>
            </ul>
        </div>
        <div id="footer">
        </div>
    </div>
</body>

CSS

/****************************************
 IMPORTANT!
*****************************************
 Normalize or reset your CSS first!
 If you are getting weird or awkward 
 spaces it could be because you forgot
 to define the margin or padding on an 
 element and the browser is using its
 default margin & padding settings. Try
 unchecking Normalized CSS under Fiddle
 Options and RUN fiddle again to see
 what I'm talking about. I intentionally
 didn't reset the margin on the h1 and p
 elements for this very reason.

 Also, in order for this to work correctly
 you need to stick to this code. Don't
 change anything unless it is noted that
 you may do so. You may change the div ids
 but remember to change them both in the
 HTML & CSS. If you do change the div ids 
 I would recommend using HTML 5 tags
 wherever possible. For example, use
 <footer> instead of <div id="footer">. 
 I chose not to do that in the fiddle to
 avoid confusion and keep it consistent.
****************************************/
body {
 	margin: 0;
 	padding: 0;
 	height: 100%;
}
html {
    height: 100%;
    margin: 0;
    padding: 0;
}
* html #wrapper {
    height:100%; 
}
#wrapper {
    min-height: 100%;
    position: relative;
}
#content {
    padding-bottom: 30px; /* ATTENTION! padding-bottom should be equal to the footer height (this keeps the footer from overlapping the content) */
}
#footer {
    position: absolute;
    width: 100%;
	clear: both;
    bottom: 0;
	padding: 0;
    margin: 0;
    /* ATTENTION! The following elements below 
    can be set to whatever your heart desires */
    height: 30px; /* REMEMBER height = padding-bottom */
    background: #333;
}



/****************************************
 ATTENTION!
*****************************************
 The following code below is just to make
 the fiddle look pretty. It isn't necessary
 and can be deleted or editted. 
****************************************/
h1 { 
    background: #333;
    padding: 20px;
    font-size: 3em;
   ...