jQuery: get the size of the overflowed div after appending more content
<p>The div:</p>

<pre><code>&lt;div id="hilo" style="width:48%;height:380px;overflow:auto;float:right;"&gt;
</code></pre>

<p>The Javascript:</p>

<pre><code>$('#re').click(function() {
    var error = 0;
    if($("#texto").val() == ""){
        $("#texto").css("border","solid 1px #990000");
        error = 1;
    }
    if(error == 1){
        return false;
    } else {
        var texto = $("#texto").val();
        var conv = $(this).attr("name");
        $.ajax({
            type: "POST",
            url: "ajaxHilo.php",
            cache: false,
            data: {
                'texto' : texto,
                'conv_id' : conv,
                'regresar' : 'ultimo'
            },
            success: function(data,status){
                $("#hilo").append(data);
                $("#texto").val("");
                var hei = $('#hilo').prop('scrollHeight');
                alert(hei);
                $("#hilo").animate({ scrollTop: hei}, 500);
                return false;
            },
            error: cualquierError
        });
    }
   });
</code></pre>

<p>the element with the id = re is a button.</p>

<p>I get the strangest results for the size of the overflowed divs, the script inserts a new div into the div hilos with just two lines of new content every time, no more than 30 or 40 pixels each, however, the count starts in 1473 and then jumps to 2193  and then 2913 and so on...</p>

<p>Firefox scrolls to the bottom but IE gives me different numbers (smaller ones) and don't scroll to the bottom at all...</p>

<p>I hope is not too confusing...</p>
