DIV overlapping sticky footer

Question

I have a div containing three other divs: header, content, footer

  <div class="note">
    <div class="header">Title</div>
    <div class="content" contenteditable="true">Some content</div>
    <div class="footer">Footer</div>
  </div>

Footer is always at the bottom of the parent div. Here is some CSS:

.note {
  position: relative;
  width: 40%;
  height: 200px;
  overflow: hidden;
  padding: 6px;
  margin-top: 10px;
}
.note .footer {
  position: absolute;
  bottom: 0px;
}
.note .content {
  overflow: hidden;
}

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?

Here is working plunker: http://plnkr.co/edit/Jhsn9EziMLs6IUCUg2ah?p=preview

Answer 1

First things first:

Remove the absolute positioning on the footer.

position: absolute;

This takes the footer 'outside' of the normal flow of the document. So, if your content increases, the footer will always appear to 'overlap' withe the content.

Instead, use relative positioning for the footer:

.content {
    background-color:Orange;
    height:400px;
    overflow: hidden;
}

.footer {
    position: relative;
    bottom: 0px;
    background-color:Black;
    color:White;

}

In the above code, you can change the height of the content and you will observe that the footer always stays at the bottom of the page irrespective of the 'size' of the content.

You'll also need to add a min-height to the content div so that gives the appearance taht the footer is always at the bottom of the screen. Just thought I'll let you know that!!

See this here-> http://jsfiddle.net/9dUJY/

Hope this helps!!!