У меня есть следующий пример:
<!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>
Он отлично работает с Chrome, Firefox или Internet Explorer в режиме quirks, но IE9 в стандартном режиме рисует текстовую область с такой же высотой, как и root. Итак, есть ли способ без использования JS, чтобы сообщить браузеру рисовать текстовое поле, используя все оставшееся пространство? Я безуспешно пытался div с атрибутами float, div с атрибутом таблицы отображения, div с атрибутом фиксированной позиции. Конечно, с Javascript или если первая строка имеет постоянную известную высоту, есть несколько рабочих решений.
Любые предложения?