Footer at end of page

Question

I'm using OSclass for my website and I tried to set footer on the bottom, but nothing worked. You can see my website here

It works on my main page because my content is long, but it doesn't work on item or account for example (my footer stay at the end of content, not at the end of page).

CSS:

body {  
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
background: transparent;
list-style-type:none;
}

.header {
height: auto; 
background-color: #0080c4; 
clear: both;
}

.header_wrap {
width:960px; 
margin:0 auto; 
position:relative; 
padding: 10px 0 160px 0;
}

.header .wcont {
float:left; 
width:468px; 
padding:0px; 
color:#FFFFFF;
}

.content {
clear: both;
margin-bottom: 20px;
width: 960px;
margin-left: auto;
margin-right: auto;
}

.footer {
padding-top: 5px;
padding-right: 33px;
padding-left: 33px;
padding-bottom: 0;
background-color: #0080c4;
clear: both;
position: fixed;
bottom: 0px;
width: 100%;
}

.footer_wrap {
width:960px; 
margin:0 auto; 
position:relative; 
padding:0 0 25px 0;
}

.footer .wcont {
float:left; 
width:200px; 
padding:0 15px; 
color:#FFFFFF;
}

Anyone have any idea for resolve it ?

Thanks a lot.

Answer 1

Try this, it puts the footer after the content or at the bottom of the page, depending how much content is in the page:

(function() {
    $('.footer').css('position', $(document).height() > $(window).height() ? "inherit" : "fixed");
})();

I wouldn't use this if the page length changes though...

Answer 2

Here is a solution for you buddy: http://jsfiddle.net/xa7LP/

HTML

<div class="header">Header</div>
<div class="body">Body</div>
<div class="footer">Footer</div>

CSS

body{padding:0; margin:0;}
div {
    display:block;
    position:relative;
    padding:20px 0;
    text-align:center;
    width:100%;
}
.header {
    background:green;
    color:#fff;
}
.body {
    margin:10px 0;
    background:blue;
    color:#fff;
}
.footer {
    background:black;
    color:#fff;
}

jQuery

$(document).ready(function(){
var dh = $(document).height(),
    fh = $(".footer").outerHeight(),
    bh = $("body").height();

if(bh<dh)
{
    $(".footer").css({
        "position":"fixed",
        "display":"block",
        "top":(dh-fh)+"px"
    });
}
});