Making a
inherit the height of parent ()

2019-01-28 00:55发布

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?

2条回答
别忘想泡老子
2楼-- · 2019-01-28 01:05

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/

查看更多
一纸荒年 Trace。
3楼-- · 2019-01-28 01:26

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.

查看更多
登录 后发表回答