Chat system with messages at the bottom of the div

Question

I am trying to build a simple chat system, like that facebook does with messenger, keep the new messages at bottom. But they add a header and keep the fix position whit the last message and of course the scrollbar

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

keep in mind, I do not want a fixed header. The problem for as I did read is that "height:auto" in chat div makes it "flow", but that is what keep the chat height dynamic. well ... if anyone has a better solution to keep the messages at bottom, with header at top and when the message reach the header gets sticky, please.

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

Yo, check this out

 (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

Now I see what your problem is:

Just remove position: absolute; from .chat