How to make div scale vertically all the way down?

Question

I have the following situation, presented in the picture. Grey div is the parent of magenta and blue divs. Magenta div scales vertically with the content. I would like to ha

Answer 1

If you need support from IE6 and up, the answer is: You can´t in css only.

There are different solutions to really scale the div or just have it appear like that:

1. You can use a background-image for the grey div (if all you need is the background to stretch all the way down)
2. You can use javascript to calculate the height of the grey div and apply it to the blue div

There is a ccs option using a very big padding and an equally big negative margin, but I don´t remember if it works for all browsers and I can't find the article right now.

Edit: The big padding / negative margin css solution:

The article is talking about Firefox 1.5 and Safari 2 so I don't know if it still works, but here it is.