css - 如何将内容附加到固定高度 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;
}