Question

如何让表格单元格中的div占据单元格的整个高度？

设置div height = 100％将不起作用，除非表格单元格上有固定的高度，但我不能这样做，因为单元格必须具有液体高度，具体取决于可变内容。

我试图让每一行中的所有div都与行的整个高度相同。

代码如下，请参阅实时示例 http://www.songtricks.com/CellDivBug.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<style type="text/css">

td
{
    padding:0px;
    vertical-align:top;
    height:auto;
}

.box
{
    margin:0px;
    border:solid 2px red;
    height:100%;
}

</style>


</head>

<body>

    <table border="1" width="50%">
    <tr>
        <td width="50%">
            <div class="box">
            This box has a lot of text.   This box has a lot of text.  This box has a lot of text.  This box has a lot of text.  This box has a lot of text.  This box has a lot of text.  This box has a lot of text.  This box has a lot of text.  This box has a lot of text.  This box has a lot of text.  
            </div>
        </td><td width="50%">
            <div class="box">
            This box has a little text.
            </div>
        </td>           
    </tr>
    </table>

</body>
</html>

经过一些研究和实验后，我想出了可能是使用CSS的唯一解决方案。我太新了，不能回答我自己的问题，所以我在这里发帖。

它基本上包括：

将位置：相对于表格单元格
放置位置：绝对;顶部：0;左：0;右：0;底部：0;在包含的divs
将内容直接放在单元格中，与div一起，而不是在div中，以强制单元格占据内容的高度

请参阅演示 http://jsfiddle.net/ehLVM/

Answer 1

你能用这个吗？它使得与它相连的所有div都具有相同的高度。

function equalHeight(group) {
    var tallest = 0;
    group.each(function() {
        var thisHeight = $(this).height();
        if(thisHeight > tallest) {
            tallest = thisHeight;
        }
    });
    group.height(tallest);
}

来源：http://www.cssnewbie.com/equal-height-columns-with-jquery/

Answer 2

在网上找了一些Google搜索并找到了this thread。似乎不可能通过CSS来做到这一点。但这有一个JavaScript解决方案。正如我在上面的评论中所建议的，为什么不将边框CSS移动到td？

Answer 3

试试这个：

table { height: 100%; }

td
{
    padding:0px;
    vertical-align:top;
    height:100%;
}

.box
{
    margin:0px;
    border:solid 2px red;
    height:100%;
}

Working Sample（在FF4上测试）

让div占据完整的细胞高度

3 个答案: