Over-scroll y filling up remaining space?

Question

I am currently building a footer element that fixed at the bottom of the page.

  <div id='footer'>
    <div id='chat'> 
      <input class='input-medium' type='text' placeholder="Say something..."/>
      <button class='btn'>Send</button>
    </div>

    <div id='logs'>
       <!-- There will be a lot of logs here and it will be scrollable-y --> 
    </div>
  </div>

I want to structure this element in such a way that my users can resize (vertically) this to however tall they like. I would the resizing to be done such that resizing the footer element will resize #logs.

How should I structure my CSS such that I can simply set a height for the footer so that:

• #chat will fill up the space first.
• #logs will fill up whatever space that is left. And if there's overflow, #logs will overflow-y?

Answer 1

It sounds like you just described exactly what you need. Not sure you needed our help. Just set the logs to 100% and overflow-y to scroll.

http://jsfiddle.net/LPPAP/1

#footer {
    position: fixed;
    bottom: 0;
    width: 600px;
    border: 1px solid gray;
    background: lightgray;
    border-radius: 15px 15px 0px 0px;
    padding: 10px;
    height: 200px;    
    left: 50%;
    margin-left: -300px;
}
#logs { height: 100%; overflow-y: scroll; margin-top: 20px; }