title: DIV overlapping sticky footer
body: <p>I have a div containing three other divs: header, content, footer</p>
  
  <pre><code>  &lt;div class="note"&gt;
      &lt;div class="header"&gt;Title&lt;/div&gt;
      &lt;div class="content" contenteditable="true"&gt;Some content&lt;/div&gt;
      &lt;div class="footer"&gt;Footer&lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>Footer is always at the bottom of the parent div. Here is some CSS:</p>
  
  <pre><code>.note {
    position: relative;
    width: 40%;
    height: 200px;
    overflow: hidden;
    padding: 6px;
    margin-top: 10px;
  }
  .note .footer {
    position: absolute;
    bottom: 0px;
  }
  .note .content {
    overflow: hidden;
  }
  </code></pre>
  
  <p>Middle div is for text input. The problem is that it overlaps the footer when there is too much text. I want the middle div to be a scrollable area, that does not overlap footer. It can be done with setting height of that div, but this is not good for me - the div with class 'note' will be resizable. How can I do it?</p>
  
  <p>Here is working plunker: <a href="http://plnkr.co/edit/Jhsn9EziMLs6IUCUg2ah?p=preview" rel="nofollow">http://plnkr.co/edit/Jhsn9EziMLs6IUCUg2ah?p=preview</a></p>