CODEWITHSUNDEEP
htmlcss
MarzSocks
MarzSocks

Reputation: 4318

Make div 100% height of TD (IE issue)

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>

Upvotes: 3

Views: 1220

Answers (1)

MarzSocks
MarzSocks

Reputation: 4318

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>

Upvotes: 2

Related Questions