Tee-Tree Tee-Tree - 1 month ago 7
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.

Answer
.chat {
   position:fixed;
   left:0px;
   bottom:0px;
   height:200px;
   width:100%;
   background:#999;
   border-top: 4px solid #333;
}

* html .chat {
   position:absolute;
   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');
}

**Demo**
http://codepen.io/turibamwe/pen/NRorrY
Comments