How do you get the sidebar to fill up the space?

Question

Using this technique for sticky footers and give this example.

* { margin:0; }
html, body { height:100%; }
#wrap { 
    min-height:100%;
    height:auto !important;
    height:100%;
    margin:0 0 -47px;
}
#side { float:left; background:#ccc; width:100px; overflow:hidden; }
#body { float:left; background:#aaa; width:300px; }
#foot, .push { height:47px; }
#foot { background:#eee; }

How do you make it so that the sidebar and/or the content box fills up the space between the header and footer?

I've tried setting the height to 100%, but it (not surprisingly) doesn't seem to take. And I can't set a fixed height since it would still break on bigger screens.

Anyone want to shed some light on this?

EDIT: The answer selected on for this question doesn't work for designs with semi-transparent footers. Show here: http://jsfiddle.net/AfwzD/23/

As such, I would like to add this to the question then. How do you make it work for this type of design?

Answer 1

This is a little bit tricky. The only one way to do it which I found is setting huge padding-bottom and opposite margin to compensate it. Plus you have to give #wrap overflow: hidden:

#body {
    ...
    padding: 80px 20px 1050px;
    margin-bottom: -1000px;
}

Demo: http://jsfiddle.net/AfwzD/21/