Rows of flexible and fixed div's within full-size window
===

I'm writing a mobile/desktop chat application that is supposed to utilize the entire screen. The bottom &lt;div> shown in yellow can be fixed-height if it needs to be -- presently it's Absolutely positioned to the bottom of the window.

My problem: the top &lt;div&gt;, in cyan, doesn't fit to the rest of the window, regardless of whether I use padding, margin, border, etc. Presently it *appears* to allow the content to wrap, but that's only because the bottom overwrites the scroll bar.

![Chat application][1]

My only solution so far is to have a final &lt;div> or &lt;br> that pads the end of the scrollable div, but that doesn't make the div smaller, or make the scroll bars properly align.

http://jsfiddle.net/FEuQy/2/ <-- what I have so far... yeah, it's messy.


  [1]: http://i.stack.imgur.com/KyuQP.png