How can I move my footer to the bottom of the page?

Question

URL: http://test.getfamo.us/

Problem: I like when you scroll down how the header stays in place at the top off the page, howver with the footer I would prefer it if it only displayed when you scrolled all the way to the bottom of the page (so the position isnt fixed in place as it is now, but rather at the very bottom of the page).

This is the CSS associated with the footer:

#foot{
left:0px;
right:0px;
color:white;
position:fixed;
height:50px;
background-color:#444444;
width:100%;
margin-bottom:0px;
bottom:0px;
margin-right:0px;
z-index:103;
}

#foot a{
height:50px;
width:75px;
float:left;
color:white;
text-align:center;
text-decoration:none;
line-height:25px;
 }

 #foot p{
position:absolute;
width:150px;
height:50px;
right:0px;
margin-bottom:0px;
margin-right:0px;
margin-top:0px;
bottom:0px;
top:0px;
}

Thanks a lot guys! Hopefully its a simple fix. Also if necessary full CSS available here: http://test.getfamo.us/css/

Answer 1

Right, I gave you the link but if you are having trouble take a look at this. Using your code and the link I gave you we can create this.

HTML:

<div class="page-wrap">
    <div id="fillspace"></div>
</div>
<div id="foot"></div>

CSS:

/* Your code */
#foot {
    left:0px;
    right:0px;
    color:white;
    height:50px;
    background-color:#444444;
    width:100%;
    margin-bottom:0px;
    bottom:0px;
    margin-right:0px;
    z-index:103;
}
#foot a {
    height:50px;
    width:75px;
    float:left;
    color:white;
    text-align:center;
    text-decoration:none;
    line-height:25px;
}
#foot p {
    position:absolute;
    width:150px;
    height:50px;
    right:0px;
    margin-bottom:0px;
    margin-right:0px;
    margin-top:0px;
    bottom:0px;
    top:0px;
}

/* New Code */
 html, body {
    height: 100%;
    margin: 0;
}
.page-wrap {
    min-height: 100%;
    /* equal to footer height */
    margin-bottom: -50px;
}
.page-wrap:after {
    content:"";
    display: block;
}
#foot, .page-wrap:after {
    /* .push must be the same height as footer */
    height: 50px;
}
#fillspace {
    width: 100%;
    height: 1000px;
    background: #ddd;
}

So put your code with the code in the link I gave you. Then we take away your position: fixed and set the correct heights of the footer to #foot, .page-wrap:after and .page-wrap. That's about it, all done. Take a look at the demo and play around with it.

With content:

DEMO HERE

Without content:

DEMO HERE