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>中设置高度= 100％或自动，但它无法解决问题。

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

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

2 个答案: