how to get a footer div to the bottom of the page? - html

Question

I've been trying for hours now couldn't find any solution for my problem I've made my footer stick to the bottom by position:fixed;bottom:0; the footer gets to bottom but when my content is more the footer doesn't expand to the bottom relative to the content so i've did this made a container div and placed my footer in it
<div id="container">
<div id="body">
</div>
<div id="footer">
</div>
</div>
#container
{
position:relative;
}
#footer
{
position:absolute;
bottom:0;
height:30px;
}
so far so good but when i try to increase my footer size(height) to 300PX it occupies my entire page I just want the footer to be at bottom with same height i have even tried making the #body{min-height:500px;} but my footer still doesn't go down with 300px of height.
To be exact i want a footer like stackoverflow but when there is no content i should still stick to bottom with a min body height.

Answer 1

Hi please follow the link http://jsfiddle.net/cooolkiran/yVC8r/
<div class="page-wrap"> Content</div>
<footer class="site-footer">
I'm the Sticky Footer.
</footer>
* {
margin: 0;
}
html, body {
height: 100%;
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -142px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
/* .push must be the same height as footer */
height: 142px;
}
.site-footer {
background: orange;
}

Answer 2

Add:
html, body {height: 100%;}
to your CSS and see if that works.

Answer 3

Replace -
<div id="container">
<div id="body">
</div>
<div id="footer">
</div>
</div>
with following code - (try with closing div id="body" after footer division)
<div id="container">
<div id="body">
<div id="footer">
</div>
</div>
</div>
jsfiddle - http://jsfiddle.net/nMVA5/

Answer 4

Try this:
<div id="container">
<div id="body">
this is body
</div>
<div id="footer">
this is footer
</div>
</div>
#container
{
border:solid red thin;
position:relative;
height:100px;
}
#footer
{
border:solid red thin;
position:absolute;
bottom:0;
height:30px;
width:100%;
}
demo link:http://jsfiddle.net/yVC8r/2/