css – 让div占据完整的单元格高度

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

设置div高度= 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;包含div
>将内容直接放在单元格中,与div一起,而不是在div中,以强制单元格占用内容的高度

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

解决方法

你能用这个吗？它使得与它相连的所有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/

css – 让div占据完整的单元格高度

解决方法

相关文章