动态高度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

你可以尝试定位#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的heignt。当内容太长时，滚动条会自动添加（overflow-y: auto;）。