User User -4 years ago 214
CSS Question

how to fix the scrollbar always at the bottom of a div?

I am doing a simple chat application,I want to fix the scrollbar of a div always at the bottom.just like thisenter image description here

When loading the index page the scrollbar must be at the bottom

Here is my style.css

font: 0.9em monospace;
border: 1px solid #ccc;
width: 250px;
height: 210px;
padding: 10px;

color: slategrey;

.message p{
margin: 5px 0;
width: 260px;
height: 40px;
padding: 5px;
margin-top: 5px;
font: 1em fantasy;


Here is my index.php

$_SESSION['user'] = (isset($_GET['user']) === TRUE) ? (int) $_GET['user'] : 0;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<link rel="stylesheet" href="css/styles.css"></link>
<div class="chat">
<div class="messages" id="messages">
<textarea class="entry" placeholder="type here and press enter"></textarea>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/chat.js"> </script>

How can i set this,please help me..

Answer Source

Try this jquery :

$(".messages").animate({ scrollTop: $(document).height() }, "slow");
  return false;

and here is the fiddle :

or refers to the height of the element (many agree is the right way), as below:

$(".messages").animate({ scrollTop: $(this).height() }, "slow");
  return false;

and here is the fiddle :

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download