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%;
}

Answer 1

您可以尝试定位#headerand the message_windowwithabsolute和 use topandbottom属性，就像您对输入区域所做的那样：

#chat_window {
    position: relative;
    height:100%;
    width: 300px;
    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 {
    position:absolute;
    width: 100%;
    top:30px;
    bottom:60px;
    overflow-y: auto;
}

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

jsfiddle

底部和顶部#messages_window需要调整到和的#header高度input_area。内容过长时会自动添加滚动条 ( overflow-y: auto;)。