How can I bottom align a div that can grow and cause it's container to scroll

Question

I'm trying to make this layout happen without javascript.

I have a parent div and a child div that contains content which keeps being appended. I want the child to be bottom aligned inside the parent and grow vertically. I also want the parent div to scroll when the height of the child > height of parent.

The first part is pretty easy with:

#child { position:absolute; bottom: 0 }

The second part is difficult because absolutely positioned elements are outside of the content-flow and won't trigger scrolling.

The parent div spans the entire height of the browser window (which I don't know at design-time)

Answer 1

Edited to show that it is possible

Turns out it IS possible to provide the dynamic layout described without using javascript. There is a way (using just CSS) to have a div bottom aligned that causes scrolling when it overflows it's parent.

The trick is to make the scrolling happen on the child, setting it's max-height to 100% (i.e. the parents height) and then bottom aligning the child with position:absolute;. You only need to make sure the parent has position:relative or absolute.

Here is the simple CSS to make it work:

#parent{
    position:absolute;
    /* these parts are obviously not necessary */
    width:500px;
    top:10px;
    bottom:10px;
}
#child{
    position:absolute;
    bottom:0px;
    right:0px;
    left:0px;
    overflow-y:auto;
    /* this is the key */
    max-height:100%;
}

This is reflected in the following jsfiddle: http://jsfiddle.net/epgdn/5/ simply resize the run-window until the child is bigger than the parent and the parent will scroll appropriately.