Obtendo div para ocupar a altura total da célula
Como faço para obter divs nas células da tabela para ocupar toda a altura da célul
Configurar div height = 100% não funcionará, a menos que a célula da tabela tenha uma altura fixa, mas não posso fazer isso porque as células devem ter uma altura líquida dependendo do conteúdo variáve
Estou tentando fazer com que todas as divs em cada linha tenham a mesma altura total da linh
O código está abaixo, veja o exemplo ao vivo emhttp: //www.songtricks.com/CellDivBug.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
td
{
padding:0px;
vertical-align:top;
height:auto;
}
.box
{
margin:0px;
border:solid 2px red;
height:100%;
}
</style>
</head>
<body>
<table border="1" width="50%">
<tr>
<td width="50%">
<div class="box">
This box has a lot of text. This box has a lot of text. This box has a lot of text. This box has a lot of text. This box has a lot of text. This box has a lot of text. This box has a lot of text. This box has a lot of text. This box has a lot of text. This box has a lot of text.
</div>
</td><td width="50%">
<div class="box">
This box has a little text.
</div>
</td>
</tr>
</table>
</body>
</html>
Depois de mais pesquisas e experimentações, eu vim com a que pode ser a única solução usando CSS. Sou novo demais para responder à minha própria pergunta, por isso estou postando aqui.
Consiste basicamente em:
Coloque posição: relativo nas células da tabela Colocar posição: absoluto; topo: 0; esquerda: 0; direita: 0; inferior: 0; em divs contidos Coloque o conteúdo diretamente na célula, ao lado de div, e não dentro dela, para forçar as células a aumentarem a altura do conteúdoVeja a demonstração emhttp: //jsfiddle.net/ehLVM