css - スクロールによる動的高さ DIV

Question

チャット メッセージ (以下の #messages_window) が、チャット エリアのヘッダーと入力エリアの間の空きスペースに合わせてサイズ変更できるチャット ウィンドウを作成しようとしています。サイズを変更しても、スクロール可能である必要があります。

ここに私が持っているHTMLがあります:

<div id="chat_window">
    <div id="header">

    </div>
    <div id="messages_window">

    </div>
    <div id="input_area">
        <input type="text" id="chat_input"/>
        <br/>
        <input type="button" style="float:right;" onclick="Javascript:sendMessage();" value="Send"/>
    </div>
</div>

CSSは次のとおりです。

#chat_window
{
    position: relative;
    width: 300px;
    height: 100%;
    border: 1px solid black;
}

#chat_window #header
{
    width: 100%;
    height: 30px;
    background-color: #69acf1;
    color: #ffffff;
    border-bottom: 1px solid black;
}

#chat_window #messages_window
{
    width: 100%;
    /*overflow: hidden;*/
}

#input_area
{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px;
}
#input_area #chat_input
{
    width: 100%;
}