title: Make a div stick to bottom of parent
body: <p>I am trying to create a layout here which looks like the following: Here's <a href="http://jsfiddle.net/GHUQQ/" rel="noreferrer">the fiddle</a>  </p>
  
  <pre><code>&lt;body&gt;
      &lt;div class="wrapper"&gt;
          &lt;div class="header"&gt;
              Header
          &lt;/div&gt;
          &lt;div class="content"&gt;
              This is the content section
          &lt;/div&gt;
          &lt;div class="stream-content"&gt;
                  This is the stream content.
          &lt;/div&gt;
          &lt;div class="push"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="footer"&gt;  
      &lt;/div&gt;
  &lt;body&gt;
  </code></pre>
  
  <p>I want the <code>content section</code> to take up the full space between the <code>header</code> and <code>footer</code> section. There is an additional section called [<code>stream-content</code>] which if there (will be there only on home page) has to take the position just before the <code>footer</code>. And in that case, the <code>content</code> section should take up space all the between <code>header</code> and <code>stream-content</code> section. I tried doing the same with absolute positioning but all my elements were going haywire, so wanted to understand the correct way of doing this. Thanks in advance for all help!</p>