使用CSS在Ajax中聊天div

Chat div in ajax using css. Am building a chat system using ajax, when the chat text exceeds the length of the screen, the newly text message tends to scroll downward beneath the chat text input form instead of scrolling upward and as a result, newly sent message cannot be been unless you scroll downward. Below is how I built my css. any help will be appreciated

JS:

$(document).ready(function() {
    setInterval(function() {
       $.ajax({ 
         type: "POST", 
         url:'chatposts.php',
         data:"uname="+uname,
         success:function(data) {
           $('#chatdisplay').html(data); 
    } }) 

      var elem = document.getElementById('comdisplay');
      elem.scrollTop = elem.scrollHeight;

    }, 10000); 
});

CSS:

.chatdisplay {
   background-color:#FF00FF; 
   min-width:100px;
   height:auto;
   margin-left:56px; 
   padding:10px 0 10px 10px;
   margin-top:1px; 
   font-size:12px; 
   color:#000;
}
#chatbox {
  display:block; 
  bottom:0;  
  margin-left: 0px; 
  position:fixed; 
  width:100%;
}

HTML:

<div id="chatdisplay" >
    Display chat message...
</div>


<div id="chatbox">
   <form action="" method="post" name="chat_form">
      <input name="chat_comment" class="comment" type="text" id="chat_comment">
      <input name="chatBtn" class="chatBtn" id="chatbtn" type="submit" value="Chat" />
   </form>
</div>

PHP:

    <?php
       require('db.php');
       $result = $db->prepare('
       select * from chat where pid=:pid order by cmid');
       $result->execute(array(':pid' => '43'));
       $countcom=$result->rowCount();
       while ($full = $result->fetch()) {
         $cmid=htmlentities($full['cmid'], ENT_QUOTES, "UTF-8");
         $cname1=htmlentities($full['comment'], ENT_QUOTES, "UTF-8");
         $comment_pic2=htmlentities($full['user_pic66'], ENT_QUOTES, "UTF-8");
         $tt=htmlentities($full['c_time'], ENT_QUOTES, "UTF-8");
         $bb=htmlentities($full['user_name66'], ENT_QUOTES, "UTF-8");
    ?>
    <div id="chatdisplay<?php echo $cmid;?>" class="chatdisplay" >
    <img width="20" height="20" src='http://localhost/sri_chat/db/photo/<?php echo $comment_pic2;?>' /> 
    &nbsp;

   <?php 
     echo $bb;
   ?>: &nbsp;<?php echo $cname1;?>


    </div>

    <?php }?>

I don't think this is possible with pure CSS. But you could do it with JavaScript.

Example:

HTML: (A bit different than yours, but same concept)

<div class="message">
    <p>This was the first message</p>
    <p>Another message</p>
    <p>A third message about something a bit longer</p>    
</div>

<button>New message</button>

JS: (I used jQuery in this example)

var button = $('button');
var container = $(".message");

button.on('click', function() {
    container.append('<p> A new message</p>');
    container.scrollTop(container[0].scrollHeight);
});

Demo:

http://jsfiddle.net/u4u33286/3/

Well the best way to solve the problem would be to invert how you are putting the messages into the box (newest at top) but if you want them at the bottom.

var chatBox = document.getElementById("chatdisplay");
chatBox.scrollTop = chatBox.scrollHeight;

Should do it.

http://www.w3schools.com/jsref/prop_element_scrolltop.asp For more info on the Dom property

*Kris beat me to it