CSS：位置动态大小 div 到静态底部 Div

Question

我正在向基于 WebSocket 的 Web 应用程序添加聊天功能。在常规聊天 windows 中，最早的消息在 window 的顶部，最新的在底部。

我的实现应该采用这种典型的从上到下的元素顺序。然而，在传统的聊天 windows 中，最老的消息会停留在框架的顶部。我的实现应该将最年轻的消息贴在框架的底部。从我儿子玩 Minecraft 的情况来看，Minecraft 拥有理想的聊天界面。事实上，Minecraft 聊天界面看起来与我想要实现的完全相似。

如何在 CSS 中让聊天消息粘在他们 window 的底部？

如果 calc() 提供一种方法来引用它所应用的元素的当前高度，这将很容易，因为我可以做类似的事情

position: relative;
top: calc(240px - [current element height]);

其中 240px 是聊天的静态高度 window。

提前致谢。

Answer 1

首先，将position:relative放在父容器

上

#container{
position:relative;
}

然后，将 position:absolute 加入聊天 window

#chat{
position:absolute;
bottom: 0px;
}

这应该可以处理动态高度。

Answer 2

试试这个：

html

<div id="staticDiv"></div>

css

#staticDiv{
    height:300px;
    width:300px;
    background:yellow;
    position:relative; //static div position relative
}

#addedDiv{
    position: absolute; //dynamically added div position absolute
    height:50px;
    width:200px;
    background:red;
    left:0;
    bottom:0;    
}

javascript

var a = "<div id='addedDiv'></div>";
document.getElementById('staticDiv').innerHTML = a;

http://jsfiddle.net/qhgewc8n/1/

CSS：位置动态大小 div 到静态底部 Div

CSS: Position Dynamically Sized div to Bottom of Static Div

html

css

chat