如何將內容追加到固定高度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>