Menu
Given the following html sample, how can I make the absolute positioned div height 100% of the table cell. This is only an issue for IE.
The catch is that div must not affect the cell contents, hence the position absolute, and the row style must define the height.
<html>
<table>
<tr style="height:100px;">
<td style="position:relative;width:200px;background-color:green;border:solid 2px green;">
<div style="position:absolute;background-color:red;width:100%;height:100%;top:0px;left:0px;"></div>
xyz
</td>
</tr>
</table>
</html>
865
I've actually solved this by applying a "height:inherit" on div and the parent the td.
<html>
<table>
<tr style="height:100px;">
<td style="position:relative;width:200px;height:inherit;background-color:green;border:solid 2px green;">
<div style="position:absolute;background-color:red;width:100%;height:inherit;top:0px;left:0px;"></div>
xyz
</td>
</tr>
</table>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With