How can I append content to the bottom of a fixed-height div and have it overflow-y: scroll?

Question

The question explains it pretty fully, but here's some more detail:

1. I have a div with a fixed height.
2. Content is dynamically loaded via Ajax and appended to the div.

Added content is always positioned at the bottom of the div.

2 pieces of content (no scrolling yet)

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

Additional content pushes existing content up until the div starts to scroll in the y-direction.

5 pieces of content (1 item scrolled)

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

Can this be done with CSS?

EDIT

Must work in Internet Explorer!

Answer 1

I think you'll need to use Javascript to do the scrolling part by setting scrollTop to the scrollHeight after each append. My buddy Eric Pascarello posted a solution quite a while ago.

Getting it vertically positioned to the bottom is also somewhat of a challenge, but the following CSS ought to do it...

<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

This code works for me in Firefox and Chrome. It only works in IE (7 and 8) under standards mode.

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