使用css使<div>继承父级（<td>）的高度？

Question

当我的桌子行高度增长时，我希望我的div内部自动匹配它。

对于上面的代码，我的div的高度始终为0 。

我理解height:inherit仅在显式声明父级（ <td> ）的高度时才有效，但我不想这样做，因为我不知道那里会显示什么内容高度。

有没有css技巧可以做到这一点，还是我不得不诉诸一些JS？

Answer 1

你不能使用height规则，但你仍然可以通过绝对定位div来达到你想要的效果。 由于这会更改div的布局，因此您必须将宽度应用于td ：

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

这是你的小提琴： http ： //jsfiddle.net/ZAvDd/2/

Answer 2

你的div的目的是什么？

你的div目前的高度为0（零），因为它是空的。 你可以做的是通过向它添加一个类直接将样式应用于你的父td：

<td class="bar">

并相应地设计它：

.bar { background: gray;}

这真的取决于你的div的目的。