The question explains it pretty fully, but here's some more detail:
div
with a fixed height.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!
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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With