CSS：将动态大小的div定位到静态Div的底部

Question

我在基于WebSocket的网络应用中添加了聊天功能。在传统的聊天窗口中，最老的消息位于窗口的顶部，最新的消息位于底部。

我的实现应该分享这个典型的，从上到下的元素顺序。但是，在传统的聊天窗口中，最老的消息粘在框架的顶部。我的实现应该有最年轻的消息贴在框架的底部。根据我所看到的儿子玩的东西，Minecraft有这个理想的聊天界面。事实上，Minecraft聊天界面看起来与我想要实现的完全相同。

如何在CSS中将聊天消息粘贴到窗口的底部？

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

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

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

提前致谢。

Answer 1

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

#container{
position:relative;
}

然后，将position:absolute放在聊天窗口

#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/