0

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 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?

Community
  • 1
  • 1
Xavier_Ex
  • 8,432
  • 11
  • 39
  • 55
  • Not sure what is meant by "overflowing from the bottom" and "overflowing from the top" – Jason Dec 05 '13 at 18:09
  • @Jason so when you have a child element taller than the parent and overflow is set to be hidden on the parent, the bottom part of the child will be cut off. What I meant by overflowing from top is that, the child element is always sticky to the bottom of the parent and when overflowing the top of the child is cut off. – Xavier_Ex Dec 05 '13 at 18:14

1 Answers1

0

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/

Jason
  • 2,280
  • 23
  • 22
  • Sorry I don't quite understand what you're doing here. Why did you add a padding to the parent but set the height to be 0? That'd push the child outside of the parent. – Xavier_Ex Dec 06 '13 at 17:24
  • Perhaps you misunderstood my intention. Going back to the original jsfiddle that I posted, without changing anything visually, I want the bottom border of the child to be stick to the bottom of the grey box, so it is visible. Meanwhile the top of the child is hidden since it's outside of the grey box. Ideally I want to find a natural CSS solution to this so it works for arbitrary sizes of child and parent. – Xavier_Ex Dec 06 '13 at 17:27
  • I see the bottom red line cut off. So you are essentially looking for a way to show the bottom red line but not the top? I'm still confused by the "animation" part of your question. – Jason Dec 06 '13 at 17:41
  • Right, I want to show the bottom line "docked" to the bottom of the parent, and the top hidden. To be more specific, I want this effect to be persistent. So even if I change the height of the parent dynamically, the bottom red line is always sticky to the bottom of the parent, and it's just the top part being shown/hidden based on if the parent has enough height. – Xavier_Ex Dec 07 '13 at 19:50