height: 100% inside another div with unknown height in IE6

Question

I have a simple HTML layout:

<div style="position:relative; width:200px">
   <div style="position:absolute; top:0; left:0; background-color:red; z-index:-1; width:100%; height: 100%"></div>
   Some text goes here....
</div>

Something like this works fine in all the browsers, except for IE6. As the text is added the top div is stretched and absolutely position div is stretched as well. But in IE6 the absolutely position div will always stay only 1 line in height. I know that IE6 can't dynamically recalculate sizes, and because of that you have to set height: 100% on the body tag if you ever want to use height: 100% anywhere on the page, but in this case, I can't set height:100% on the outer div, since I want it to be just the right size for the text inside of it. Any help?

Answer 1

Add overflow: hidden; to the absolute div.

Answer 2

http://stackoverflow.com/questions/1970289/giving-height-to-absolutely-positioned-divs-in-ie6

Answer 3

an example solution which makes use of javascript(jquery).

http://jsbin.com/ohipu3

Answer 4

my 2nd attempt, without using javascript, but illegally moved around the divs.

http://jsbin.com/ohipu3/2

Answer 5

This is a known bug in IE6 but for the life of me I can't recall the solution. I'll look it up but, off the top of my head, try adding 'line-height:1', or some value, and see if it fixes it.