html - 在两个 div 之间创建一个滚动 div

Question

首先，是的，我已经阅读了很多关于这个问题的主题，并且this one几乎正是我想要的。 唯一的问题是我让整体变得可滚动，而我只希望中间的 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 可以滚动......

我想要的示例:https://alpha.hacklyon.com/ 右下角的聊天机器人图标，展开后就是我想要的!

Answer 1

这是您要找的吗？

<div id="chat_icon" style="position: fixed; right: 0; bottom: 0; margin-bottom: 4%; margin-right: 4%" ;>
  <div class="collapse" id="iframe_holder">
    <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: 120px">
        <ul id="messages" class="list-group">23232323</ul>
        <ul id="messages" class="list-group">23232323</ul>
        <ul id="messages" class="list-group">23232323</ul>
        <ul id="messages" class="list-group">23232323</ul>
        <ul id="messages" class="list-group">23232323</ul>
        <ul id="messages" class="list-group">23232323</ul>
        <ul id="messages" class="list-group">23232323</ul>
        <ul id="messages" class="list-group">23232323</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>
    </div>
  </div>
  <button class="btn btn-lg btn-circle" data-target="#iframe_holder" data-toggle="collapse"><i class="glyphicon glyphicon-send"></i></button>
</div>