Making a inherit the height of parent () 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

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.