This is my code:
#footer {
font-size: 10px;
position:absolute;
bottom:0;
background:#ffffff;
}
I've no idea what is wrong with this - can anyone help?
EDIT: For some more clarity on what's wrong: The footer is displayed on the bottom as expected when the page loads. However, when the web page's height is > than the dimensions on the screen such that a scroll bar appears, the footer stays in that same location. That is to say, when the height of the page is <= 100%, the footer is at the bottom. However, when the page height is >100%, the footer is NOT at the bottom of that page, but at the bottom of the visible screen instead.
EDIT: Surprisingly, none of the solutions below worked. I ended up implementing a sidebar instead.
You're probably looking for this example:
<div class="wrapper">
Your content here
<div class="push"></div>
</div>
<div class="footer">
Your footer here
</div>
For a 142-pixel footer
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
}
/*
Sticky Footer by Ryan Fait
http://ryanfait.com/
*/