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

Question

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

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

Ric*_*kir 5

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

如果它能够将div对齐到顶部而不是中间,我在这里做了一个如何做到的例子(添加vertical-align:top;到td标签).我做了一个只使用div的例子,虽然我知道你说你对它的形式有限制.

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

编辑如果你不喜欢使用jQuery,我已经在这里更新了我的例子来做你需要的.

归档时间：	14 年，7 月前
查看次数：	11002 次
最近记录：	14 年，7 月前