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

Question

我在填充TD标签时遇到了一些小问题。我想要在插入到TD中的DIV上看到100%的高度。

http://pastebin.com/Z4apksVw

如何将任何DIV填充为父元素的100%高度？

已解决

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

在Firefox 26下工作，其他浏览器我没有检查，因为我不需要。

- przeqpiciel

---

你能把你的问题表述清楚吗？ - Amarnath Balasubramanian

不，它必须是DIV。 - przeqpiciel

我支持xec的观点，请解释一下你除了拉伸div之外还想做什么！你为什么要这样做？ - I am Cavic

必须使用DIV，因为TD代表工作时间，而DIV（带有可拖动的UI Jquery）代表与患者会面。 - przeqpiciel

你能看一下这个链接，看看它是否对你有帮助吗？ http://www.reignwaterdesigns.com/ad/tidbits/hacks/minimum_height_in_css.shtml - I am Cavic

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上也无法正常工作。

这里是一个带有更新的有效示例：http://jsfiddle.net/s4dDL/13/

- Andrew

---

用JavaScript很容易...你会使用JavaScript吗？ - Andrew

我非常确定它可以仅使用CSS工作，我不应该使用JS。 - przeqpiciel

看这个fiddle：http://jsfiddle.net/s4dDL/4/，它能运行，只需手动设置高度...不幸的是，100%仅为该行设置高度而非rowspan=2。否则，为什么不使用td元素而非div呢？ - Andrew

Firefox不支持在td/th上使用position: relative。在FF中查看：http://jsfiddle.net/s4dDL/10/ - Spadar Shut

其实，是的，您不需要定位，并且它在Firefox上不起作用，如果您完全填充单元格，则不需要定位。请参见此修复程序，已删除定位：http://jsfiddle.net/s4dDL/13/ - Andrew