Question

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

我的问题：

如何让儿童元素保持在屏幕底部。动画进行一段时间后，所有元素最终都会到达底部，因为最终其中一个是高度：100％..如果在此之前，我怎样才能让元素位于屏幕底部？

Java类：

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

我尝试了位置：绝对;底部：0 ..但这显然不起作用。

Answer 1

我的解决方案要求您使用其他div包装容器。我称之为outerContainer。一旦你有了它并将其高度设置为100％，你可以使用display table trick：

#outerContainer{
    display : table;
}

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

小提琴：http://jsfiddle.net/5wJ5D/2/

Answer 2

您可以将background属性设置为线性渐变，并将内部div高度设置为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

一个快速而肮脏的解决方案

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

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

3 个答案: