過度滾動並填滿剩餘空間？

Question

我目前正在建立一個固定在頁面底部的頁腳元素。

<div id='footer'> 
    <div id='chat'> 
     <input class='input-medium' type='text' placeholder="Say something..."/> 
     <button class='btn'>Send</button> 
    </div> 

    <div id='logs'> 
     <!-- There will be a lot of logs here and it will be scrollable-y --> 
    </div> 
    </div> 

我想以這樣一種方式來構造這個元素，使得我的用戶可以調整（垂直）這個值，使其達到他們喜歡的高度。我會調整大小，以便調整頁腳元素的大小來調整#logs的大小。

我應該如何架構我的CSS，這樣我可以簡單地設置頁腳的高度，使：

• #chat將首先填滿空間。
• ＃日誌會填滿剩下的空間。如果溢出，#logs會溢出-y？

Answer 1

這聽起來像你剛剛描述了你需要什麼。不知道你需要我們的幫助！只需將日誌設置爲100％並溢出-y即可滾動。

http://jsfiddle.net/LPPAP/1

#footer { 
    position: fixed; 
    bottom: 0; 
    width: 600px; 
    border: 1px solid gray; 
    background: lightgray; 
    border-radius: 15px 15px 0px 0px; 
    padding: 10px; 
    height: 200px;  
    left: 50%; 
    margin-left: -300px; 
} 
#logs { height: 100%; overflow-y: scroll; margin-top: 20px; }