Come posso aggiungere il contenuto alla parte inferiore di un div di altezza fissa e farlo traboccare-y: scorrere?

Question

La domanda spiega abbastanza pieno, ma qui è un po 'più in dettaglio:

1. Ho un div con un'altezza fissa.
2. Il contenuto viene caricato dinamicamente tramite Ajax e aggiunto allo div.

Il contenuto aggiunto è sempre posizionato nella parte inferiore di div.

2 pezzi di contenuti (non ancora scorrimento)

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

contenuto aggiuntivo spinge contenuto esistente fino agli div inizia a scorrere nella direzione y.

5 pezzi di contenuto (1 articolo scorrere)

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

si può fare con i CSS?

EDIT

deve lavorare in Internet Explorer!

Answer 1

Penso che sarà necessario utilizzare Javascript per eseguire la parte di scorrimento impostando scrollTop per il scrollHeight dopo ogni aggiunta. Il mio amico Eric Pascarello posted a solution un po 'di tempo fa.

Getting it posizionato verticalmente verso il basso è anche un po 'una sfida, ma il seguente CSS dovrebbe farlo ...

<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

Questo codice funziona per me in Firefox e Chrome. Funziona solo in IE (7 e 8) in modalità standard.

<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>