javascript - 如何使子元素粘在父底部而忽略顶部溢出？

Question

如何让子元素粘在其父元素的底部，即使在溢出时也是如此？请看this fiddle一个演示。在演示中，子容器用红色边框表示，您现在可以看到子元素粘在父元素的顶部并从底部溢出，这是很自然的。但我希望元素粘在底部并从顶部溢出。我马上就能想到几种相关的方法:

1. 在父级上使用position: relative 并使用position: absolute;底部:0px 在 child 身上。这在我的情况下不起作用，因为我不希望 child 被排除在流程之外。

2. 如 this post 中所述我可以利用 css 表格来保持元素的流动。但这并没有真正产生预期的效果，因为我希望元素即使在溢出时也能粘在父元素的底部。

我想要这种效果的原因是当我为父级的高度设置动画时，我对子级有一个很好的“下拉”效果。有没有办法用 css 完成所需的布局？

Answer 1

好的，我想我明白你的问题了。可以通过更改父级的边距、填充和高度来实现所需的效果。

.parent {
    padding-top: 200px;
    height: 0;
    background: #e0e0e0;
    overflow: hidden;
}

.child {
    height: 300px;
    font-size: 80px;
    border: 1px solid red;
}

在这种情况下，填充充当高度。从 0 到 child 高度 (300px) 的高度动画应该会产生所需的效果。

这是 jsfiddle 的更新 http://jsfiddle.net/8FeC9/2/