Создайте прокрутку div между двумя div

Question

Прежде всего, да, я прочитал много вопросов об этой проблеме, и эта - почти то, что я хочу.Единственная проблема в том, что я получаю прокручиваемое целое, когда я не хочу, чтобы прокручивалось среднее деление.

Может быть, это связано с тем, что я использую его в iFrame?

Это HTML-код моего iFrame:

<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/ Chatbotзначок в правом нижнем углу, когда вы его разверните, это именно то, что я хочу!

Answer 1

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

Answer 2

Это то, что вы ищете?

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

Answer 3

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