Making a <div> inherit the height of parent (<td>) using only css?

Question

http://jsfiddle.net/ZAvDd/

As my table row grows in height, I'd like my div inside to automatically match it as well.

For the code above, my div 's height is always 0 .

I understand that the height:inherit only works when you explicitly state the height of the parent ( <td> ) but I don't want to do that because I have no idea what content height will be displayed there.

Is there any css trick to do this or do I have to resort to some JS?

Answer 1

You cannot using a height rule, but you can still achieve the effect you're after by positioning the div absolutely. Since this changes the layout of the div, you will then have to apply the width to the td instead:

td.fooed {position:relative; width:30px;}
td.fooed .foo {
    position:absolute; top:0px; left:0px; right:0px; bottom:0px;
    background:gray;
}

Here's your fiddle: http://jsfiddle.net/ZAvDd/2/

Answer 2

What is the purpose of your div?

Your div has currently a height of 0 (zero) because it's empty. What you can do is apply the style directly to your parent td by adding a class to it:

<td class="bar">

And style it accordingly:

.bar { background: gray;}

It really depends on the purpose of your div.