让div占据完整的细胞高度

Question

让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>

Run Code Online (Sandbox Code Playgroud)

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

它基本上包括:

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

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

Answer 1

Ras*_*ika 0

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

归档时间：	14 年，10 月前
查看次数：	4288 次
最近记录：	14 年，2 月前