制作< div>仅使用css继承父级（< td>）的高度？ [英] Making a <div> inherit the height of parent (<td>) using only css?

问题描述

http://jsfiddle.net/ZAvDd/

由于我的表格行在高度上增长，我希望我的div在里面也自动匹配。

As my table row grows in height, I'd like my div inside to automatically match it as well.

对于上面的代码，我的 div 的高度总是 0 。

For the code above, my div's height is always 0.

height：inherit 仅在您明确指定父级（< td> ）的高度时才起作用， t想要这样做，因为我不知道什么内容高度将显示在那里。

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.

有任何css技巧，做这个或者我必须诉诸一些JS ？

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

推荐答案

您不能使用 height 规则，通过定位div绝对地实现你后的效果。由于这会更改div的布局，因此您必须将宽度应用于 td ：

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;
}

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

这篇关于制作< div>仅使用css继承父级（< td>）的高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！