Question

我在桌子的一排摆放了三个“面板”。一个比其他两个更高，我希望所有三个面板都匹配最高的一个。我尝试使用高度：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>

Answer 1

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

如果它有助于将div对齐到顶部而不是中间，我提供了一个示例here如何做到（将vertical-align:top;添加到td标记）。我做了一个只使用div的例子，虽然我知道你说你对它的形式有限制。

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

修改如果您不喜欢使用jQuery，我已更新了我的示例here以执行您需要的操作。

Answer 2

height=100%;   
or
height=inherit;

其中一个应该可以解决问题：）

Answer 3

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

删除内联样式（希望你可以这样做）并将面板体的最小高度设置为200px。

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

3 个答案: