如何设置与容器相同的嵌套DIV高度？

Question

请找到我的代码片段，如下所示：

<table cellpadding="0" cellspacing="0" style="background-color:Aqua">
    <tr>
        <td>
            <div style="background-color:Yellow">Navigation</div>
        </td>
        <td>
            Content<br />Content<br />Content<br />Content<br />
        </td>
    </tr>
</table>

我怎样才能使高度<div>相同内容的增长<td> 我试图在<div>和<td>设置height = 100％或AUTO，但是它不能解决问题。

我知道可以通过使用jQuery / JavaScript来获取内容的高度并在<div>上进行设置来解决此问题，例如：

$(".divClass").height($(".contentClass").height());

但是我的内容会崩溃，并且会随着用户操作而扩展，因此我需要更好的解决方案。 解决方案必须与IE 6到IE 10兼容。

Answer 1

您可以直接使用HTML / CSS进行操作

<table cellpadding="0" cellspacing="0" style="background-color:Aqua">
    <tr>
        <td>
            <span style="height:100%; display:inline-block; width: 100%; background-color:Yellow">
                Navigation
            </span>
        </td>
        <td>
            Content<br />Content<br />Content<br />Content<br />
        </td>
    </tr>
</table>

Answer 2

尝试使用height:inherit; :)为我工作:)

的jsfiddle。

HTML：

<div class="foo">
    <div class="foo2">
        Foo2
    </div>
</div>

CSS：

.foo {
    height: 100px; /*try changing this */
    background-color: yellow; /*it wont show*/
}

.foo2 {
    height: inherit;
    background-color: green; /*it will show*/
}