Scroll siempre abajo

Hola a todos:

Estoy trabajando un chat php/ajax y me encuentro con que al llenarse con mensajes la ventana de chat, los mensaje nuevos quedan fuera/abajo de la div que las contiene.

¿Como sera posible que al cargarlos con este script la barra de scroll vertical baje al máximo?:

(cualquier otra solución fuera de la caja servirá también)

<script>
function GrabarMensaje() {
var element = document.getElementById('MensajeGrabar');
element.innerHTML = '<p><img src="Imagenes/ajax_loading.gif" /> Grabando datos</p>';
var poststr = "Grabar.php?nombre=" + encodeURI( document.getElementById("nombre").value)
var poststr = poststr +"&mensaje=" + encodeURI( document.getElementById("mensaje").value
);
peticion.open("GET", poststr);
peticion.onreadystatechange = function() {
if (peticion.readyState == 4) {
element.innerHTML = "&nbsp;"
document.getElementById("mensaje").value =''
cargarmensaje() ;
}
}
peticion.send(null);
}
</script>

Lo que podrias hacer es que el scroll del div sea automático asi:

Código HTML :

<style>
#mensaje{
height: 500px; /* Alto del div */
overflow: auto; /* Si el contenido del div es mayor a su altura, se muestra el scroll*/
}
<style>
<div id="mensaje"></div>