How to position an element at the bottom of a div which has height and over-flow:auto

Question

Here is my situation, I have a div which has height:400px and overflow:auto to get scrolled when the content is longer than 400px. inside this div I have 2 divs. A normal one with unkown height and another with absolute positioning which in anchored to bottom:0px;

As long as there is no scrollbar and the height is below 400px everything is OK. but as soon as we get scrollbars the problem occurs.

Here is the problem, I want the absolute div to be positioned according the real hight of div content not 400px. I want it to be always at the bottom of the scrollbar position down in the bottom not just the visual zero bottom.

is there anyone who could shed some light?

Answer 1

How about wrapping the two inner divs with another that has a "min-height" of 100% (and a "position" of "relative" to make it an offset parent for the absolutely positioned div)? A quick test in Chrome suggests this might work.

IE6 may be a bit trickier (if you need to support it), as it doesn't support "min-height". You might, with an IE6 specific CSS hack, get "height" to do that for you, though, as IE6 seems to treat "height" pretty much like "min-height".