title: how to fix the scrollbar always at the bottom of a div?
body: <p>I am doing a simple chat application,I want to fix the scrollbar of a div always at the bottom.just like this<img src="https://i.stack.imgur.com/i9NCa.jpg" alt="enter image description here"></p>
  
  <p>When loading the index page the scrollbar must be at the bottom</p>
  
  <p>Here is my style.css</p>
  
  <pre><code>body{
  font: 0.9em monospace;
  }
     .messages{
      border: 1px solid #ccc;
      width: 250px;
      height: 210px;
      padding: 10px;
      overflow-y:scroll;
  
  }
  .message{
      color: slategrey;
  
  }
   .message p{
      margin: 5px 0;
  }
  .entry{
     width: 260px;
     height: 40px;
     padding: 5px;
     margin-top: 5px;
     font: 1em fantasy;
  
  }
  </code></pre>
  
  <p>Here is my index.php</p>
  
  <pre><code>&lt;?php
  session_start();
  $_SESSION['user'] = (isset($_GET['user']) === TRUE) ? (int) $_GET['user'] : 0;
  ?&gt;
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
    &lt;head&gt;
        &lt;link rel="stylesheet" href="css/styles.css"&gt;&lt;/link&gt;
    &lt;/head&gt;
     &lt;body&gt;
        &lt;div class="chat"&gt;
             &lt;div class="messages" id="messages"&gt;
             &lt;/div&gt;
          &lt;textarea class="entry" placeholder="type here and press enter"&gt;&lt;/textarea&gt;
      &lt;/div&gt;
      &lt;script type="text/javascript" src="js/jquery-1.8.2.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/chat.js"&gt; &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>How can i set this,please help me..
  Thanks</p>