Tee-Tree Tee-Tree - 3 months ago 25
CSS Question

Making a position:absolute div stay in place on page resize

I read How to make a fixed div? and it did help, because I did find out what is causing the problem, but I do not know how to fix it.

I've got something like a chat bar. The chat bar has three options: it is completely hidden, it takes up a half of the page or it takes up the whole page.

I got those options to work, but there is a problem...

If the page is resized, the chat window... stays at the point which was the bottom of the screen before the content was loaded ( if that makes any sense ).

I know what is causing the problem. To make the chat screen (its' position is absolute) take up the whole screen, I set its' top value to 0. To make it cover only a part of the page, I set bottom to 200px. But then there was a problem - you cannot have both top and bottom defined at the same time.

So I did the following - whenever I set the top to 0px - I set the bottom to auto. And whenever I set the bottom to 200px I set top to auto. And if I don't it won't do anything.

But then... there is this problem which I mentioned - the chat window does not move on page resize....

Can someone help?

EDIT This is the picture of the situation:

This is the picture of the situation

The menu on the bottom is the chat bar.

.chat {
   border-top: 4px solid #333;

* html .chat {
   top:expression((0-(footer.offsetHeight(document.documentElement.clientHeight ?document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');