使溢出的内容滚动到元素上方（而不是下方）

Question

I am trying to create a chat page on my website. One of the important features of this application is that old messages should be pushed up on the chat output area whenever a new message is received.

The user should be able to scroll up to see messages in the chronological order that they were received. I have tried to do this ( http://jsfiddle.net/wasingej/rqee378d/ ). However, I cannot scroll up to see the overflowing content.

This works fine when content is overflowing below my element ( http://jsfiddle.net/wasingej/rqee378d/3/ ).

All that has changed between the two is the bottom property has been changed to top . Why won't my scroll bar appear in the first example?

Answer 1

Isn't this much simpler?

http://jsfiddle.net/rqee378d/4/

div.outer
{
    position: relative;
    min-height: 20px;
    overflow-y: scroll;
}

div
{
    position: relative;
}

And adding the text using a prepend.

http://api.jquery.com/prepend/

Answer 2

Your scroll bar wont appear in your first example because you are positioning the element using absolute . Please read more about positioning here . Here is a quote:

What is happening is the absolutely positioned elements are positioning themselves in relation to the body element instead of their direct parent.

This is why your scrollbar is not appearing. If you make them block elements with a position of static then scrolling would work fine.