100% Height Problem - height

Question

here's the site I'm working on: http://antidote.treethink.com/about/
I am trying to get it so that the footer is always at the bottom of the screen unless the content runs past the screen, then it will sit below the content.
To do this, I thought to have the "wrapper" div be 100% min-height then tell the footer to sit at the bottom of that div. I tried putting min-height classes on the body, html and wrapper tags but it didn't work.
This is my css: http://antidote.treethink.com/wp-content/themes/antidote-new/style.css
Thanks,
Wade

Answer 1

You can try classic solution
<div id="header-content">
<div id="header">
bar
</div>
<div id="content">
bar
</div>
</div>
<div id="footer">
foo
</div>
main.css
html,
body {
height:100%;
}
#header-content {
position:relative;
min-height:100%;
}
#content {
padding-bottom:3em;
}
#footer {
position:relative;
height:3em;
margin:-3em 0 0;
}
ie.css
* HTML #header-content {
height:100%; /* min-height for IE<7 */
}

Answer 2

This is just off the top of my head. My thought create a container div that holds your content. Put the footer at an relative position of bottom: 0px; within that.
<div id="content-container">
<div id="page-content" style="position: relative;"><p>This holds my content</p></div>
<div id="footer" style="position: relative; bottom: 0px;">
<p>Footer content in here</p>
</div>
</div>
I think that should work...
Edit
Actually the top of my head is not right. This post has helped me in the past though...
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/