如何让表格单元格中的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中,以强制单元格占用内容的高度
解决方法
你能用这个吗？它使得与它相连的所有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/
