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

Question

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.

there's no issue with setting top and bottom at the same time. I do it all the time. but you cannot set height when you want top+bottom to determine height instead — softwarenewbie7331, Oct 24 '16 at 06:01
Please provide a [mcve] it doesn't have to be the whole chatroom just the CSS and HTML — zer00ne, Oct 24 '16 at 06:06
Showing the code or the screenshot of your application will help to understand your issue more clearly. So try to add the screenshot if possible. — iiR, Oct 24 '16 at 06:08

icecub · Answer 1 · 2016-10-24T06:32:47.157

Without your actual code, this would be the best I can come up with. Make sure to replace your_div_id_here with the id of your chat div! The idea behind this code is that when the window is resized, it sets the position of your div correctly again. You should add this Javascript code inside your <head/> elements.

var addEvent = function(object, type, callback) {
    if (object == null || typeof(object) == 'undefined') return;
    if (object.addEventListener) {
        object.addEventListener(type, callback, false);
    } else if (object.attachEvent) {
        object.attachEvent("on" + type, callback);
    } else {
        object["on"+type] = callback;
    }
};

addEvent(window, "resize", function(event) {
    var chatDiv = document.getElementById("your_div_id_here"),
        chatStyle = window.getComputedStyle(chatDiv),
        chatTop = chatStyle.getPropertyValue("top");

    if(chatTop == "0px"){
        chatDiv.style.top = "0px";
        chatDiv.style.bottom = "auto";
    } else if(chatTop == "auto"){
        chatDiv.style.top = "auto";
        chatDiv.style.bottom = "200px";
    } else {
        return false;
    }
});

score 0 · Accepted Answer · answered Oct 24 '16 at 06:34

.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

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

2 Answers2