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

How to set nested DIV height same as container?

本文关键字：设置 高度 嵌套 DIV      更新时间：2023-09-26

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

<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跨浏览器兼容。

您可以直接使用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>

尝试使用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*/
}
相关文章：