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

Question

How do you make a child element stick to the bottom of its parent, even when overflowing? Please see this fiddle for a demo. In the demo the child container is denoted by a red border, as you can see now the child element is sticky to the top of the parent and overflowing from the bottom, which is natural. But I want the element to be sticky to the bottom and overflowing from the top. I can think of several relevant approaches right off my head:

1. Use position: relative on parent and use position: absolute; bottom: 0px position: absolute; bottom: 0px on child. This doesn't work in my case since I don't want the child to be taken out of the flow.

2. As mentioned in this post I can utilize a css table to keep the element in the flow. But this doesn't really produce the desired effect, since I want the element to stick to the bottom of the parent even when overflowing.

The reason I want this effect is so when I animate the height of the parent, I have a nice "dropdown" effect on the child. Is there a way to accomplish the desired layout with css?

Answer 1

OK, I think I get what you are asking. The desired affect can be achieved by changing up your margins, padding, and height on the parent.

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

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

The padding acts as the height in this case. Animating the height from 0 to height of child (300px) should give the desired affect.

Here's an update to the jsfiddle http://jsfiddle.net/8FeC9/2/