CSS for chat room
===

I'm trying to build a page that is similar to Facebook's email conversation UI. Basically, I want a container for the messages that display a scroll bar followed by a form to submit new messages. Note that Facebook's container for messages does not have a scroll bar; rather, it uses the browser's scroll bar to allow users to scroll up to previous messages. I'm not trying to use the browser's scroll bar to scroll the messages in the messages container; I'm happy to let the container have its own scroll bar.

Here's the general mark up:

    <div id="conversation">
        <div class="messages_container">
            <!-- ordered list of messages here -->
        </div>
        <div id="new_message_form">
            <!-- form to submit new messages here -->
        </div>
    </div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

How do I style this in such a way that:

 1. .messages_container has the height of majority of the screen
 2. #new_message_form appears immediately below .messages_container and remains there even if the page is scrolled
 3. #new_message_form probably needs a fixed height since it needs to contain a form (e.g. 2 line text area, submit button, a checkbox or two for certain options)

I'm not sure how to maximize use of screen real estate when .messages_container probably needs to be in % while 