如何設置與容器相同的嵌套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*/
}