動態高度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;）。