如何将 DIV 元素填充到 td 父级中？

Question

实际上我在填写 TD 标签时遇到了一点问题。我会在插入到 TD 的 div 上看到 100% 的 td 设置高度

http://pastebin.com/Z4apksVw

如何将任何 div 填充到父级高度的 100%？？

已解决

<?php 
`http://jsfiddle.net/s5rbv/`
?>

在 firefox 26 下工作，其他浏览器我不检查，因为我不需要

Answer 1

对于您的问题：“如何将任何 div 填充到父高度的 100%？？”只需将子元素的 div 高度设置为 100%，它将填充父元素的高度。

childDIv{
    height:100%;
}

编辑使用您提供的新信息，以下是您的问题的解决方案：

小提琴：http://jsfiddle.net/s4dDL/4/

HTML

<table>
<tr><td rowspan="2"><div>row 1 and 2</div></td><td>col 2</td><td>col 3</td></tr>
<tr><td>col 2</td><td>col 3</td></tr>
<tr><td>col1</td><td>col 2</td><td>col 3</td></tr>
</table>

CSS

*{margin:0;padding:0;}

table{
    border-collapse:collapse;
}

td{
    position:relative;
    height:100px;
    width:50px;  
    background-color:red;
}

td div {
    position:absolute;
    top:0;
    left:0;
    height:200px;
    z-index:10;
    background-color:green;    
}

您将 div 设置为绝对位置，并将左侧和顶部设置为 0 以将其设置为 td 元素的左上角，但需要将 td 设置为相对位置才能使其工作。然后将 div 的高度设置为 td 元素高度的 2 倍。但是要让它出现在第二行的顶部 (rowspan=2)，您需要设置一个 z-index。

编辑

实际上，如果你填满了整个单元格，就不需要使用定位，而且无论如何它在 Firefox 上都不起作用。正如 cmets 中指出的那样。

这是一个更新的工作小提琴：http://jsfiddle.net/s4dDL/13/