Geek Answers Handbook

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

http://jsfiddle.net/ZAvDd/

As my table row grows tall, I would like my div inside to automatically match it.

For the above code, the div height is always 0 .

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

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

+6
source share
2 answers

You cannot use the height rule, but you can still achieve the effect you use by deciding to position the div. Since this changes the layout of the div, then you will have to apply the width to td :

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

Here is your fiddle: http://jsfiddle.net/ZAvDd/2/

+5
source

What is the purpose of your div?

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

 <td class="bar">

And configure it accordingly:

 .bar { background: gray;}

It really depends on the purpose of your div.

0
source

More articles:


All Articles