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

您可以尝试使用#header定位message_window和absolute，并使用top和bottom属性，就像您对输入区域所做的那样：

#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;）时，会自动添加滚动条。

动态高度DIV滚动

1 个答案: