Question

首先，是的，我已经阅读了很多关于这个问题的主题，this one几乎就是我想要的。唯一的问题是我得到整个可滚动，当我只是不想中间div可滚动。

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

这是我的iFrame的HTML：

 <?php
echo '<input type="date" name="doc" value="' . date("Y-m-d") . '" min="2014-11-04" max="' . date("Y-m-d") . '"/>';
?>

我想要的是在右下角做一个小聊天图标，当点击它时，会展开一个小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>

Answer 2

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

Answer 3

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

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

3 个答案: