Footer at end of page [duplicate] - html

Question

This question already has answers here:
Make footer stick to bottom of page correctly [duplicate]
(10 answers)
Closed 8 years ago.
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"
});
}
});