Question

如果将子元素粘贴到其父元素的底部，即使溢出也是如此？有关演示，请参阅this fiddle。在演示中，子容器用红色边框表示，现在您可以看到子元素粘在父元素的顶部并从底部溢出，这很自然。但我希望元素粘在底部并从顶部溢出。我可以想到几个相关的方法：

在父级上使用position: relative，在子级上使用position: absolute; bottom: 0px。这在我的情况下不起作用，因为我不希望孩子被带出流。
如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到身高（300px）的高度应该会产生预期的效果。

以下是对jsfiddle http://jsfiddle.net/8FeC9/2/

的更新

如何让子元素粘到父母底部忽略顶部溢出？

1 个答案: