在 div 底部带有消息的聊天系统答案

【问题标题】：Chat system with messages at the bottom of the div在 div 底部带有消息的聊天系统
【发布时间】：2017-09-01 19:21:53
【问题描述】：

我正在尝试构建一个简单的聊天系统，就像 facebook 对 messenger 所做的那样，将新消息保留在底部。但是他们添加了一个标题并保持最后一条消息的固定位置，当然还有滚动条

Here is my try... but no scrollbar and the header do not move too.

请记住，我不想要一个固定的标题。我读到的问题是聊天 div 中的“height:auto”使它“流动”，但这就是保持聊天高度动态的原因。好吧...如果有人有更好的解决方案来将消息保持在底部，标题在顶部，并且当消息到达标题时变得粘滞，请。

PS: With only the ccs3 display:flex, I been able to achieve my goal here.. very simple.. It's possible without ? even with JS' '

【问题讨论】：

标签： javascript html css

【解决方案1】：

哟，看看这个

(function(i) {
  $(".click").click(function() {

    if (parseInt($(".chat .placeholder").css("margin-bottom")) > 32) {
      $(".chat .placeholder").css("margin-bottom", "-=50px");
    }

    else if ($(".chat .placeholder").css("margin-bottom") == "32px") {
      $(".chat .placeholder").css("margin-bottom", "0px");
    }

    $(".chat").append("<p>hey " + (++i) + "</p>");
   
   $(".chat").scrollTop( $(".chat").prop('scrollHeight') - $(".chat").outerHeight() );

  })
})(0);

.main .chat {
  width: 100%;
  position: absolute;
  top: 30px;
  background: red;
  box-sizing: border-box;
  height: 200px;
  overflow: auto;
}

.chat p {
  background: blue;
  padding: 16px 20px;
  margin: 0;
}

.main .header {
  position: relative;
  background: yellow;
  height: 18px;
}

p.placeholder {
  width: 100%;
  padding: 0;
  margin-top: 0;
  margin-bottom: 132px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='button' class='click' value='add'>
<div class='main'>

  <div class='chat'>
    <p class="placeholder header">Header</p>
    <p>hello</p>
  </div>
</div>

【讨论】：

感谢您的回答，但 z-index 仅使“标题”在其他 div 上可见“绝对||相关”并且具有像固定 div 的行为.. 我希望聊天 div 扩展并在屏幕上长出标题，在主 div 中创建一个滚动条，将新消息保留在底部。就像脸书一样。
这里还是一样。标题固定。我可以使用 display:flex.. 但我只需要 css2.. 检查 flex 版本jsfiddle.net/cLtkt0sw。谢谢
@RicardoGomes 我更改了标题。立即检查。
Nop.. 现在标题在 .chat“蓝色”之间有一个“边距”。所以不粘..看看我用 display:flex 制作的版本。但我需要在 safari:ios 中工作并且不需要.. 我正在尝试使用表格.. 似乎 facebook 是这样做的。谢谢你..
@RicardoGomes 我看了你的版本。现在我已经逐个像素地制作了与您的演示相同的演示。

【解决方案2】：

现在我明白你的问题是什么了：

只需从 .chat 中删除 position: absolute;

【讨论】：

感谢您的回答，是的.. 但这不是问题。我希望标题在外面.. 随着 .chat 扩展而不是标题上方。
重做我的答案。忘记 z-index 的东西
然后消息将保持在顶部，新消息将到达旧消息下方。和它的标题是固定的。我的目标是底部的新消息，历史增长到顶部，当到达标题时使其粘在消息上。当然还有滚动条。一种！如果可能的话，没有javascript！我刚刚发现了“display:flex”..如果没有这个新的 ccs3 东西.. 更好。谢谢