Set page height to minimum of screen height

I started with the css layout generator at CSScreator, and I've chopped and changed a little... mostly added bits to get where I am now.

I've pretty much got there with what I want (apart from the content itself), except for two issues. One is that I want to set the page to 100% of the height of the screen. I have tried the "height:100%;" attribute in various places to no avail... but it seems that it does actually have an effect if I set a definite value ("height=500px" for example), but that presents it's own no doubt obvious problems (the page doesn't then expand expand with content).

The other problem I seem to have relates to the positioning of the text on the footer. MSIE does exactly what I would like it to do, but Firefox seems to add a small space below the footer image, and the developer toolbar of firefox gives me no clues where it comes from... I'm pretty much stumped on both counts!

If anybody could help, I'd very much appreciate it.

Any help would be much appreciated.

index.html (http://www.crimsone.plus.com/site/index.htm)
birds.css (http://www.crimsone.plus.com/site/birds.css) - same css for each page.

OK - the strange space at the bottom of the window in Firefox I've just fixed by adding a wrapper. I don't know why it fixed it, but it did.

I still have no idea how to set it so that the page stretches to the bottom of the window though. I've tried the height:100% in various places, including the new wrapper to no avail. I tried the "faux column" trick within the content column... stretching an image vertically. That was also to no avail, probably due to the overflow:hidden which I had to add there in order to use italics without IE adding it's extra pixels and shifting the left column below it.

I'm not really good at CSS (perhaps even useless) - though I am trying... Not doing too badly it seems, all things considered, even if I have spend a good few hours at it! I am completely clueless over this height issue though, and would really appreciate some help with it. The code is updated on the links above.

Have you set the height of the html container to 100%? If not then the content of the page will just be 100% of the container which will only be as high as its contents.

html, body {height : 100%;}

Yes - that's one of the variations I tried to no effect.

I also have html {
height:100%;
}

...above the...

html, body{
margin:0;
padding:0;
text-align:center;
background-color: #886f6f;
}

...in the current stylesheet (I did try the height in the latter also) to no avail. That's when I thought that it might be a good idea to try stretching "#wrapper" with a repeating image, but that didn't work either, with the added problem of making the left tiled background dissapear.