javascript - 保持元素在父元素的底部

Question

我有一个简单的动画。看一看。 http://jsfiddle.net/5wJ5D/

我的问题:

如何让子元素停留在屏幕底部。动画播放一段时间后，所有元素最终都会到达底部，因为最终其中一个元素是 height:100%.. 如何在发生这种情况之前让元素位于屏幕底部？

JavaS:

setInterval(function(){
    var height = Math.floor(Math.random() * (10 - 1 + 1)) + 1;
    $('#container').prepend('<div style="height:'+height+'0%"></div>');
}, 500);
html, body, #container {
    height:100%;
}
#container > div {
    width:20px;
    background:black;
    display:inline-block;
}

我试过 position:absolute; bottom:0.. 但这显然行不通。

Answer 1

我的解决方案要求您用另一个 div 包装您的容器。我将其命名为 outerContainer。一旦你有了它并将其高度设置为 100%，你就可以使用显示 table 技巧:

#outerContainer{
    display : table;
}

#container{
    display : table-cell;
    vertical-align:bottom;
}

fiddle :http://jsfiddle.net/5wJ5D/2/