2015-01-17 4 views
3

Учитывая следующий пример html, как можно сделать абсолютную позицию div height 100% ячейки таблицы. Это только проблема для IE.Сделать div 100% высоты TD (IE issue)

Уловка заключается в том, что div не должен влиять на содержимое ячейки, поэтому абсолютная позиция и стиль строки должны определять высоту.

<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> 

ответ

3

Я на самом деле решить это за счет применения «высота: унаследовать» на DIV и родителю тд.

<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> 
Смежные вопросы