如何将内容追加到固定高度div的底部并使其溢出-y：scroll？

Question

问题解释它非常全面，但这里的一些细节：

1. 我有一个固定的高度div。
2. 内容通过Ajax动态加载并附加到div。

添加的内容总是位于div的底部。

2条内容（无滚动尚未）

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

附加内容推现有内容直到div开始在y方向上滚动。

5条内容（1项滚动）

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

可以这样用CSS做？

编辑

在Internet Explorer中必须努力！

Answer 1

我想你需要使用Javascript做滚动部分，在每次追加后将scrollTop设置为scrollHeight。我的好友Eric Pascarello posted a solution不久前。

获取它垂直放置在底部也有些是一个挑战，但下面的CSS应该做...

<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

此代码对我的作品在Firefox和Chrome。它只能在标准模式下在IE（7和8）中使用。

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