logo标签列表

让div占据整个单元格高度

cssxhtml
6
如何使表格单元格内的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解决问题的方法。由于我太新手无法回答自己的问题，所以在这里发布。

具体步骤如下：

  1. 在表格单元格上添加position:relative
  2. 在包含的div上添加position:absolute; top:0; left:0; right:0; bottom:0;
  3. 将内容直接放置在单元格内，与div并排放置，而不是在其中，以强制单元格采用内容的高度

请参见演示：http://jsfiddle.net/ehLVM/

我想知道，为什么不能将边框CSS移到td而不是.box？ 这样可以轻松地使所有框看起来大小相同。 - Rasika
根据您的使用情况，我可以想到一种不使用 table（或 JavaScript）的方法来完成这个任务。我应该发布吗？但是这种方法有点复杂。 - thirtydot
@thirtydot，好的，请这么做。我在寻找任何可能的答案... - Stephen
你应该在Safari 5或Firefox 3.6中尝试你的jsFiddle :( - thirtydot
3个回答
2

你能使用这个吗？它可以使所有带有此属性的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/

本文介绍了如何使用jQuery实现等高列布局。等高列布局是指在多栏布局中，使所有列的高度相等。通过使用jQuery，我们可以轻松地实现这一目标。具体方法是：首先，找到最高的列；然后，将其他列的高度设置为最高列的高度。这样，就可以实现等高列布局。
0

试试这个：

table { height: 100%; }

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

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

工作样例（在FF4上测试通过）

谢谢Ronak，这是令人鼓舞的。它在FF和Chrome中运行得很好，但在IE中不行。有什么想法吗？我会继续尝试… - Stephen
0

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

谢谢回复。希望避免使用JS。我无法在单元格上放置边框，因为div实际上是一个复杂的构造，使用图形切片呈现8个部分的3D边框。 - Stephen
根据我链接中的帖子，由于浏览器不一致性，完全通过CSS实现这一点是不可能的。 - Rasika
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接