I'm having trouble getting the sticky footer to work. Essentially, I want it to do exactly what this demo does
http://matthewjamestaylor.com/blog/bottom-footer-demo.htm
I have tried about a dozen tutorials trying to get this to work, and I just can't do it. Can someone help me out? Here is my site (It's running Wordpress 3.4.1)
http://hgsupport.x10.mx/support/
Thanks
Something like this in your CSS perhaps?
#footer
{position: fixed; bottom: 0;}
Using the Chrome Inspector on the example you linked (its shows you the DOM tree, CSS rules applying to an element, gives you a real JS console and a lot more tools and information), I saw he applied the following CSS to his footer div:
#footer{
position: absolute; /* Allows you to position the element anywhere
you want without affecting other elements */
bottom: 0; /* Distance from bottom of element to bottom of page set to 0 */
height: 60px; /* Footer is 60 pixels high, not too important */
width: 100%; /* width of footer is all the width of the parent element, which
is all available space here. */
}
If you want the footer to stay at the bottom of the screen, as opposed to the page, you have to replace position: absolute with position: fixedin the above code.
Viewing the source code (Ctrl-U in most browsers) and looking at the CSS would have done fine, too.
position: fixed;
bottom: 0;
That's the relevant CSS. You can see an example at http://jsfiddle.net/ZZYPK/
Edit: Example with lots of example text to show that it stays at the bottom of the page: http://jsfiddle.net/ZZYPK/1/
Try to see if this setup fits your needs: http://jsfiddle.net/yceaS/.
The key part is to have a wrapper div with your content and your footer in seperate div and then use CSS rules to fix the positioning
I had the same problem as you, and this did it for me!
Here is the CSS:
html{
height: 100%;
}
body{
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -100px auto;
/*The -100px mentioned above needs to be the exact height of the footer.*/
}
.footer{
height: 100px;
clear: both;
position: relative;
}
.nudge{
height: 100px;
clear: both;
}
The HTML is formatted as follows:
<html>
<body>
<div class="wrapper">
Your main content goes in here
<div class="nudge"></div>
<!--The nudge div should remain empty and makes space for the negative margin assigned above.-->
</div><!--END class="wrapper" -->
<footer>
Your footer content goes in here
</footer>
</body>
</html>
The nudge was what was missing from all the other solutions on the web and in the other answers.
Source: http://www.davidjrush.com/blog/2009/01/css-sticky-footer/