Make footer take remianing bottom space using css

Question

I want my footer to take height same as the remaining bottom space. Currently I'm using following css for footer:

clear: both;
float: left;
background-color: #1F1102;
color: #E4F2FA;
min-height: 60px;
font-family: Verdana, Geneva, sans-serif;
font-size: 10px;
padding: 0;
padding-top: 10px;
text-align: left;
width: 100%;
min-width: 1000px;
margin: auto;

The result is:

Here as you can see the black has take only minimum height. I want it to take whole remaining space after it [that is marked with question marks]. Which changes do I have to make to get this?

note:- I don't want to give position:fixed to make it stick to bottom.

Answer 1

Well, the short answer is, You Can't!
The longer answer? You can fake it.

Why can't you?

Because a block level element is not able to strech and fill a space in height.

Fake it how?

Use the same background color as the footer for the container (or the same background image), that will cause it to appear like it's always fills up the entire space.