html - 制作一个仅使用css继承父（）的高度？

Question

http://jsfiddle.net/ZAvDd/

随着我的表格行的高度增加，我希望我的 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的目的。