将元素保留在父元素的底部

Question

I have a simple animation. Take a look at it. http://jsfiddle.net/5wJ5D/

MY QUESTION:

How can I make the children elements stay at the bottom of the screen. After the animation goes for a while, all the elements eventually go to the bottom because eventually one of them is height:100%.. how can I get the elements to be at the bottom of the screen even before this happens?

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

I tried position:absolute; bottom:0.. but that obviously doesn't work.

Answer 1

My solution require that you wrap your container with an other div. I've called it outerContainer . Once you have that and set its height at 100%, you can use the display table trick :

#outerContainer{
    display : table;
}

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

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

Answer 2

You can set the background property to a linear-gradient and set the inner div heights to 100%

CSS

html, body, #container {
    height:100%;
}
#container > div {
    height: 100%;
    width:20px;
    display:inline-block;
}

JS

var count = 0;

var interval = setInterval(function () {
    if(count > 10){
        clearInterval(interval);
    }
    var height = Math.floor(Math.random() * (10 - 1 + 1)) + 1;
    $('#container').prepend('<div style="background: linear-gradient(to top, black '+ height +'0%, transparent '+ height +'0%);"></div>');
    count++;
}, 500);

jsFiddle

Answer 3

One quick and dirty solution

CSS:

#container > div {
    height: 100%;
    width:20px;
    display:inline-block;
    float:left;
    position:relative;
}

JS:

setInterval(function(){
    var height = Math.floor(Math.random() * (10 - 1 + 1)) + 1;
    $('#container').prepend('<div style="bottom:'+(height-10)+'0%;height:' + height + '0%"></div>');
}, 500);