Html 是否在滚动y上填充剩余空间?

Html 是否在滚动y上填充剩余空间?,html,css,Html,Css,我目前正在构建一个固定在页面底部的页脚元素 <div id='footer'> <div id='chat'> <input class='input-medium' type='text' placeholder="Say something..."/> <button class='btn'>Send</button> </div> <div id='logs

我目前正在构建一个固定在页面底部的页脚元素

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

邮寄
我想以这样一种方式构造这个元素,我的用户可以(垂直地)调整这个元素的大小,使其达到他们喜欢的高度。我希望调整页脚元素的大小能够调整#日志的大小

我应该如何构造CSS,以便可以简单地设置页脚的高度,以便:

  • #聊天会先填满空间
  • #日志将填满剩下的任何空间。如果出现溢出,#日志将溢出-y

听起来你刚刚准确地描述了你需要什么。不确定你是否需要我们的帮助!只需将日志设置为100%,并将overflow-y设置为滚动

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