divの一番下にメッセージがあるチャットシステム

Question

私はFacebookのメッセンジャーのような簡単なチャットシステムを構築しようとしています。しかし、彼らは、ヘッダを追加し、固定位置を保つ最後のメッセージを聖霊降臨祭、そしてもちろんスクロールバー

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

は心に留めておく、私は固定ヘッダを望んでいません。私が読んだときの問題は、chat divの "height：auto"が "flow"になるということですが、これがチャットの高さを動的に保つことです。 うーん...もし誰かがメッセージを一番下に置いた方がよいでしょう。ヘッダーは一番上にあり、メッセージがヘッダーに届くと固着します。

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;を削除