7

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?

meiryo
  • 11,157
  • 14
  • 47
  • 52

2 Answers2

7

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/

rgthree
  • 7,217
  • 17
  • 21
  • Thanks. I'm a novice at css but is absolute positioning the only way? I'm gonna be frank here: it's 2013 and we still have to resort to these little hacks? – meiryo Jan 21 '13 at 16:44
  • 1
    Well, you could try to use css flexbox, but I wouldn't recommend it. The flexbox spec has changed and it's "final" state isn't well supported, as well as no support under IE10. http://caniuse.com/#search=flexbox – rgthree Jan 21 '13 at 18:17
  • Thanks for the hack. You can also shorten the code by simply saying `inset: 0;` on the div. – JBrown Feb 02 '23 at 17:49
-1

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.

jgthms
  • 864
  • 8
  • 18