Tabela com linha de 100% de altura e Internet Explorer 9

Question

Aug 03, 2011, 04:00 PM

Tabela com linha de 100% de altura e Internet Explorer 9

Tenho o seguinte exemplo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Example</title>
</head>
<BODY>
<DIV style="height:150px;background-color:#AAAAFF;overflow:auto">
<TABLE style="height:100%;width:300px">
    <TR>
        <TD style="background-color:orange">Text with an unknown height (22px here)</TD>
    </TR>
    <TR style="height:100%">
        <TD style="height:100%;background-color:yellow">
            <TEXTAREA style="height:100%;-moz-box-sizing:border-box" COLS=30 ROWS=4>Remaining space (150px with IE9, 122px with others)</TEXTAREA>
        </TD>
    </TR>
</TABLE>
</DIV>
</BODY>
</html>

Funciona bem usando o Chrome, Firefox ou Internet Explorer no modo quirks, mas o IE9 no modo padrão desenha uma área de texto com a mesma altura da raiz div. Então, existe uma maneira de usar o JS, para dizer ao navegador para desenhar uma área de texto usando todo o espaço restante? Eu tentei div sem sucesso div com atributos de flutuação, div com atributo de tabela de exibição, div com atributo de posição fixa. Obviamente, com Javascript ou se a primeira linha tiver uma altura conhecida constante, existem várias soluções de trabalh

Alguma sugestão