Full Column height with footer and header height subtracted

I have what appears to be a fairly common problem. I have a portion of a website that needs to be full-height if the content is less than able to fill the screen. The design is fixed-width...so height is my only concern. I have tried height:100%, in CSS and the min-height for Mozilla. When I do this, it works, except my column ends up TOO tall. It appears that my height is 100% plus the height of my header plus the height of my footer. The closest I got was adding the following to my #main div:

position: absolute;
top: 125px;
right: 0;
left: 0;
bottom: 0;

...but this ended up making the height great for short content, but when I was on a page with long content, the content no longer pushed my footer down below it. I also tried simply applying the background image to the overall container (which is taking full height), but that ended up putting my image over everything...maybe there is a way to do that but force it to a lower layer? Anyway, there is so much CSS and HTML involved in the page that a link is probably much more useful...so when I come up with a solution (hopefully with your help) I will post the original and modified parts here...the main HTML and CSS should remain unchanged for years. http://www.broadwaybaptist.org/beliefs/

P.S. I know people m开发者_C百科ention that JavaScript usually has to be used to solve this. I am okay with that...but do not know at all how to approach that. I also would prefer to do it with just CSS...but i will take what i can get. THANKS!

You, sir, are talking about a sticky footer. It sits at the bottom of the screen when the page isn't long enough to push it down, but it slides along with the content when the content is long enough.

To implement it, your site needs to have this sort of construction:

<div id="wrapper">
  <header>
    ...
  </header>

  <div id="content">
    ...
  </div>
</div>

<footer>
  ...
</footer>

Basically, wrap everything except the footer in one big <div> tag.

There is even a full (well, kind of) tutorial on how to make your site work with it. Read it here: http://www.cssstickyfooter.com/using-sticky-footer-code.html