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>中的内容增长相同？我试图在 <div> 中设置 height=100% 或 AUTO和 <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>