Question

我正在尝试构建一个简单的聊天系统，就像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''

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

Answer 2

现在我看到你的问题是：

从.chat

中删除position: absolute;

聊天系统与div底部的消息

2 个答案: