title: Push Footer at Bottom of Parent Div
body: <p>I have a simple layout where I have two Divs inside a parent Div. <a href="http://jsfiddle.net/0er2u066/" rel="nofollow">[See this.]</a>
  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.</p>
  
  <p>What I tried so far is to make <code>position: absolute; bottom: 0;</code> to footer and yes, footer will stick to bottom but the first child div <code>(.content)</code> doesn't take the other remaining spaces.</p>
  
  <p>Is it possible?. Please help. Thanks.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class='main'&gt;
      &lt;div class='content'&gt;My Canvas Container&lt;/div&gt;
      &lt;div class='footer'&gt;Footer&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.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;
  }
  </code></pre>