如何使 div 匹配包含 td 的高度？答案

【问题标题】：How to make div match the height of the containing td?如何使 div 匹配包含 td 的高度？
【发布时间】：2011-06-22 23:56:22
【问题描述】：

我在桌子的一行上布置了三个“面板”。一个比另外两个高，我希望所有三个面板都与最高一个的高度相匹配。我尝试使用 height: 100% 设置 div 的样式，但是即使包含的 tds 增长，短面板仍然很短。

我的 HTML 是由 JSF 生成的，因此我对其形式的控制有限，但我可以修改样式。我在下面制作了生成代码的简化版本。同样的问题出现在 IE8 和 Firefox 上。但是，IE8 将短面板垂直对齐到 td 的顶部，而 Firefox 将它们呈现在中间。

<html>
<head>
    <title>Test Table</title>
    <style TYPE="text/css">
        td {border: 1px solid red; padding: 1px;}
        .panel {border: 1px solid blue; padding: 1px;height:100%}
        .panel-header{background-color: green; color: white;}
        .panel-body {border: 1px solid green; padding: 1px; height:100%;}
    </style> 
</head>
<body>
    <h1>Test Table</h1>
    <table width="100%">
    <tbody>
        <tr>
            <td>
                <div class="panel" style="height:200px;">
                    <div class="panel-header">
                    Header One
                    </div>
                    <div class="panel-body">
                    Body One
                    </div>
                </div>
            </td>
            <td>
                <div class="panel" style="height:100%;">
                    <div class="panel-header">
                    Header Two
                    </div>
                    <div class="panel-body">
                    Body Two
                    </div>
                </div>
            </td>
            <td>
                <div class="panel">
                    <div class="panel-header">
                    Header Three
                    </div>
                    <div class="panel-body">
                    Body Three
                    </div>
                </div>
            </td>
        </tr>
    </tbody>
    </table>

</body>
<html>

【问题讨论】：

我在我的帖子中添加了一种使用 jQuery 执行此操作的方法。希望对你有帮助！
绝对定位也可以，看看this answer。
五年后，所以我无法测试我当时创建的实际页面，但只是尝试你的 Fiddle，对不起，但它根本不起作用.你可能误解了我所面临的问题。无论如何，Richard 建议的 jQuery 解决方案效果很好。

标签： html css jsf

【解决方案1】：

我不认为您可以将高度设置为 100%，而无需明确说明 tds（或表格）的高度。在height:100% 生效之前，您似乎必须在父元素上指定一个显式高度。也许您可以将样式修改为 td 标签本身而不是 div 容器？

如果它有助于将 div 对齐到顶部而不是中间，我做了一个示例 here 来说明如何做到这一点（将 vertical-align:top; 添加到 td 标签）。我也做了一个仅使用 div 的示例，尽管我知道您说过您对其形式的控制有限。

如果您知道一个元素的最大高度，将表格或表格单元格设置为该高度（即height:200px;）应该会使 100% 对 div 生效。

编辑如果您不反对使用 jQuery，我已经更新了我的示例 here 来满足您的需求。

【讨论】：

Drackir 是正确的；表格 TD 元素本身没有指定高度值，因此要求 100% 高度的子元素将无法计算这一点。正如 Drackir 所说，您可以手动设置 TD 的高度，或者......您可以将它们的高度指定为 100%，将 DIV 的高度指定为 100%，并指定表格的高度。或者，您也可以将 100% 高度应用于表格；该表将从其父元素中获取高度值，这可能并不理想，但它将允许所有 div 具有相同的高度，因为您向任何给定的 DIV 添加更多内容。
是的，当表只有一行时，让整个表增长应该或多或少起作用。但是，我的真实表有几行。遗憾的是 td 元素知道如何调整自己的大小，但无法将该信息传递给它们包含的 div。我将编写一个可以调整大小并将其附加到面板的 onresize 事件的脚本。如果我可以让它工作，我会在这里发布。（如果！）
@Greg Charles：如果您不反对使用 jQuery，我已经在我的帖子中添加了您想要的示例。
不，我绝对不反对 jQuery。真是天赐良机！感谢您为我整理了该脚本。我需要一种方法将其限制为我感兴趣的面板行，但我应该能够管理它。感谢您的帮助！
@Greg Charles：很高兴我能帮上忙。您只需修改选择器以包含所需容器的 ID。见here

【解决方案2】：

我的解决方案：http://jsfiddle.net/k6Dam/2/

删除内联样式（希望你能做到）并将面板主体的最小高度设置为 200 像素。

【讨论】：

我认为问题在于当一个人的身体超出其他人的高度时。此解决方案无法解决，请参阅here。
@Drackir 当然可以，但是使用这个标记你不能没有任何限制地做到这一点。他也许可以用 jQuery/Javascript 读取第一个元素的高度，并根据给定的值设置高度。
是的。不幸的是，这可能是唯一的解决方案。 :(

【解决方案3】：

height=100%;   
or
height=inherit;

其中一个应该可以解决问题:)

【讨论】：

OP 已经有 height:100% 并说：“我尝试使用 height: 100% 设置 div 的样式，但是即使包含的 tds 增长，短面板仍然很短。”此外，如果这些应该是 CSS，您需要使用冒号而不是等号。
也许我不明白这个问题:) 但是继承应该可以工作......或者他应该为 TD 设置样式（但这不是他想要的）。是的，您需要使用“：”。但是我打字很快：$对不起:)
我只是想让你知道。您可以编辑答案以添加冒号。 :) 左下角有一个编辑链接。
是的，我知道 :) 但我没看到 :$ 但是你上面的回答更有意义。如果没有什么可以继承，你就不能继承……所以你是对的！ :)