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

Question

即使溢出，如何使子元素堅持其父元素的底部？ 請觀看此小提琴以獲取演示。 在演示中，子容器用紅色邊框表示，您現在可以看到，子元素粘在父元素的頂部，並從底部溢出，這很自然。 但是我希望元素在底部保持粘性並從頂部溢出。 我可以想到幾種相關的方法：

1. 使用position: relative對於父項，使用position: absolute; bottom: 0px position: absolute; bottom: 0px的孩子。 在我的情況下，這是行不通的，因為我不希望孩子被帶離流程。

2. 正如提到的這個職位 ，我可以利用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/