如何将内容附加到固定高度div的底部并让它溢出-y:滚动？

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不久前发布了一个解决方案。

将其垂直定位到底部也是一个挑战，但下面的 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;
}