javascript - 如何将嵌套的 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>？我尝试在 and 中设置 height=100% 或 AUTO <div>，<td>但这并不能解决问题。

我知道它可以通过使用 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*/
}