确定位置：绝对 div 在页面调整大小时保持原位答案

【问题标题】：Making a position:absolute div stay in place on page resize确定位置：绝对 div 在页面调整大小时保持原位
【发布时间】：2016-10-24 05:53:23
【问题描述】：

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

我有一个类似聊天栏的东西。聊天栏有三种选择：完全隐藏、占半页或占整页。

我可以使用这些选项，但是有一个问题...

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

我知道是什么导致了问题。为了让聊天屏幕（它的位置是absolute）占据整个屏幕，我将它的'top值设置为0。让它只覆盖一部分页面，我将 bottom 设置为 200px。但随后出现了一个问题 - 您不能同时定义顶部和底部。

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

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

有人可以帮忙吗？

编辑这是情况的图片：

底部的菜单是聊天栏。

【问题讨论】：

同时设置顶部和底部没有问题。我一直都这样做。但是当您希望 top+bottom 来确定高度时，您不能设置高度
我有一个固定的高度：/
请提供minimal reproducible example，它不必是整个聊天室，只需 CSS 和 HTML
显示代码或应用程序的屏幕截图将有助于更清楚地了解您的问题。因此，如果可能，请尝试添加屏幕截图。
我添加了截图

标签： html css

【解决方案1】：

.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

【讨论】：

【解决方案2】：

如果没有您的实际代码，这将是我能想到的最好的。确保将 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;
    }
});

【讨论】：