html - 过度滚动 y 填满剩余空间？

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 将填满剩余的空间。如果有溢出，#logs 会溢出吗？

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