Html 在两个div之间创建滚动div

首先，是的，我读过很多关于这个问题的文章，这几乎正是我想要的。 唯一的问题是，当我不想让中间的div可以滚动时，我让整个div可以滚动

也许是因为我在iFrame中使用了它

这是我的iFrame的HTML：

<div id="chat">
<div class="row-1" id="header" style="height: 20%">
    <span>Live chat</span>
</div>
<div class="row-1" id="message" style="overflow-y: scroll; height: 60%">
    <ul id="messages" class="list-group"></ul>
</div>
<div class="row-1" id="footer" style="height: 20%" >
        <input type="text" id="myMessage" placeholder="Type a message">
        <a id="sendbutton" href="#" class="btn btn-success"><span class="glyphicon glyphicon-send"></span> </a>
</div>

现场聊天

我想做的是在右下角做一个小聊天图标，点击后会展开成一个小iFrame，显示聊天：）

但是我不能只让中间的div可以滚动

我想要的示例： 聊天机器人图标位于右下角，当您展开它时，它正是我想要的

#聊天{
 #chat{
    width: 300px;
    height: 200px;
    overflow: auto;
}

<div id="chat">
  <div class="row-1" id="header">
      <span>Live chat</span>
   </div>
   <div class="row-1" id="message">
   </div>
   <div class="row-1" id="footer" style="height: 20%" ></div>
</div>

宽度：300px；
高度：200px；
溢出：自动；
}
现场聊天

这就是你要找的吗

现场聊天
2323
2323
2323
2323
2323
2323
2323
2323

您能展示一下您尝试过的CSS吗？嗯，我没有CSS，全部都在HTML中，我只是想让它工作，以后会清理它的！：/所以你得到了一切，哦，只是iFrame:

我想我已经尝试过了，我可以确认这不起作用，页脚和页眉不总是可见，滚动条在整个聊天区上……实时聊天标题和输入将被修复，内容将滚动，但否：'（我也已经尝试过了，因为这对我来说是一种合乎逻辑的方式，但是在message div上添加

overflow-y:scroll

是不够的，因为整个chat div都是可滚动的。好吧，这就是我想要的！非常感谢，伙计！

 #chat{
   width: 300px;
   height: 200px;
}
#message{
     height: 200px;
     overflow-y: auto;
 }