Push Footer at Bottom of Parent Div

Question

I have a simple layout where I have two Divs inside a parent Div. [See this.] What I want to achieve is that, the first child div must take all the space available in the container [with or without content] forcing the footer at the bottom of the parent Div. Provided that this must work responsively. So that when the main container resizes, first child div still occupies the available space and footer must stay at the bottom of the parent Div.

What I tried so far is to make position: absolute; bottom: 0; to footer and yes, footer will stick to bottom but the first child div (.content) doesn't take the other remaining spaces.

Is it possible?. Please help. Thanks.

HTML:

<div class='main'>
    <div class='content'>My Canvas Container</div>
    <div class='footer'>Footer</div>
</div>

CSS:

.main {
    height: 500px;
    background: #000;
}
.content {
    padding: 5px 10px;
    background: #fff;
    border: red solid 1px;
}
.footer {
    padding: 5px 10px;
    text-align: center;
    background: #eee;
}

.content,
.footer {
    display: block;
}

Answer 1

Not everyone's responses have considered your request that the solution be responsive (by which I assume you mean scale-able). If it's okay for the footer's height to be variable, the solution is easy:

.main {
   height: 500px;
   position: relative;
}
.content {
   height: 90%;
}
.footer {
   bottom: 0;
   height: 10%;
   position: absolute;
   width: 100%;
}

If the footer has to be a fixed height, the solution is still pretty easy but no longer has excellent browser support:

.main {
   height: 500px;
   position: relative;
}
.content {
   height: calc(100% - 50px);
}
.footer {
   bottom: 0;
   height: 50px;
   position: absolute;
   width: 100%;
}

Notes: Content-Box (the default element sizing method) ADDS things like margins to your stated sizes. If you're stating sizes in pixels, that's just a minor annoyance - you simply subtract borders/margins/etc from your stated sizes. If you're using percentages to build responsively...it's beyond a mess. You need to apply Border-Box, which SUBTRACTS things like margins from your stated sizes.

* {
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
}

Answer 2

DEMO

I am using the fake table layout technique to do this using display: table, table-cell & table-row

Code:

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
.main {
    background: #000;
    display: table;
    width: 100%;
    height: 100%;
}
.content-wrap, .footer-wrap {
    display:table-row;
}
.content, .footer {
    display: table-cell;
}
.content {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    padding: 5px 10px;
    background: #fff;
    border: red solid 1px;
    height: 100%;
}
.footer {
    padding: 5px 10px;
    text-align: center;
    background: #eee;
}