¿Cómo puedo agregar contenido a la parte inferior de un div de altura fija y hacer que se desborde-y: scroll?

Question

La pregunta lo explica bastante completo, pero aquí hay algunos detalles más:

1. Tengo un div con una altura fija.
2. El contenido se carga dinámicamente a través de Ajax y se agrega al div.

El contenido agregado siempre se coloca en la parte inferior de div.

2 piezas de contenido (sin desplazamiento todavía)

-------------------------div-- 
|       | 
|       | 
|       | 
|       | 
| some content (10:00 am) | 
|       | 
| some content (10:03 am) | 
------------------------------ 

contenido adicional empuja el contenido existente hasta los div comienza a desplazarse en la dirección y.

5 piezas de contenido (1 artículo desplaza)

-------------------------div-- 
| some content (10:03 am) ^| 
|       | 
| some content (10:04 am) #| 
|       #| 
| some content (10:07 am) #| 
|       #| 
| some content (10:09 am) v| 
------------------------------ 

se puede hacer esto con CSS?

EDITAR

Debe trabajar en Internet Explorer!

Answer 1

Creo que necesitará usar Javascript para hacer la parte de desplazamiento configurando scrollTop al scrollHeight después de cada anexar. Mi amigo Eric Pascarello posted a solution hace bastante tiempo.

Hacer las cosas en posición vertical a la parte inferior es también algo de un desafío, pero el siguiente CSS debería hacerlo ...

<div id="test"> 
    <div class="bottom"> 
    <p>Test1</p> 
    <p>Test2</p> 
    <p>Test3</p> 
    <p>Test4</p> 
    <p>Test5</p> 
    <p>Test6</p> 
    <p>Test7</p> 
    <p>Test8</p> 
    <p>Test9</p> 
    </div> 
</div> 


#test 
{ 
    background:green; 
    height:100px; 
    position:relative; 
} 

#test .bottom 
{ 
    bottom:0px; 
    max-height:100px; 
    overflow:auto; 
    position:absolute; 
    width:100%; 
} 

#test p 
{ 
    margin:0; 
} 

Answer 2

Este código funciona para mí en Firefox y Chrome. Solo funciona en IE (7 y 8) en modo estándar.

<style> 
.outer { 
    width: 200px; 
    height: 200px; 
    position: relative; 
    border: 2px solid #ccc; 
} 
.inner { 
    width: 200px; 
    max-height: 200px; 
    position: absolute; 
    bottom: 0; 
    overflow: auto; 
    background: yellow; 
} 
</style> 


<div class="outer"> 
    <div class="inner"> 
     text<br /> 
     text<br /> 
     text<br /> 
     text<br /> 
    </div> 
</div>