建立一个位置：绝对div保持在页面调整大小

Question

我读了How to make a fixed div?并且它确实有帮助，因为我确实找出了导致问题的原因，但我不知道如何修复它。

我有一个像聊天栏的东西。聊天栏有三个选项：它是完全隐藏的，它占用了一半的页面或占据了整个页面。

我有这些选择可以工作，但是有一个问题......

如果页面调整大小，聊天窗口......会在加载内容之前停留在 屏幕底部的位置（如果有的话）感觉）。

我知道造成这个问题的原因。要使聊天屏幕（其位置绝对）占据整个屏幕，我将其“ top 值设置为0.”使其仅覆盖部分内容页面，我将 bottom 设置为200px。但后来出现了问题 - 你不能同时定义顶部和底部。

所以我做了以下 - 每当我将 top 设置为0px时 - 我将底部设置为 auto 。每当我将 bottom 设置为200px时，我将其设置为 auto 。如果我不这样做，它将不会做任何事情。

但是......我提到了这个问题 - 聊天窗口不会在页面调整大小上移动....

有人可以帮忙吗？

编辑这是情况的图片：

底部的菜单是聊天栏。

Answer 1

如果没有您的实际代码，这将是我能想到的最好的代码。请务必将your_div_id_here替换为聊天div的ID！这段代码背后的想法是，当调整窗口大小时，它会再次正确设置div的位置。您应该在<head/>元素中添加此Javascript代码。

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;
    }
});

Answer 2

.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