one block at the bottom, another at the top

There are 2 divs inside of another div. The first div must be at the top, the second one should be at the bottom. The he开发者_Python百科ight of the parent div may change, and the height of the top div may change, too. Knowing this, how can I position the second block at the bottom? So I have something like this:

<div id="parentdiv">
<div id="div1" style="width:100px;height:100px;">top div</div>
<div id="div2" style="width:100px;height:100px;">bottom div</div>
</div>

But the height of the parentdiv may change, and div2 must stay at the bottom.

Live Demo

• This works well if you know the height of the parent will always be at least the height of the two child elements combined. Otherwise, this happens.
• Read this to understand how it works.

CSS:

#parentdiv {
    position: relative;
    height: 300px;
    background: #ccc
}
#div1, #div2 {
    position: absolute;
    left: 0;
    outline: 1px solid red
}
#div1 {
    top: 0
}
#div2 {
    bottom: 0
}