Я думаю, что важно понимать, что установка height: 100% для текстовой области будет работать только в IE, если вы явно установите его в режим причуд, хотя он работает, как и ожидалось, в Firefox. W3C утверждает, что размер текстовой области определяется в строках, а не в пикселях и т. Д.
Показанный ниже простой способ убедиться, что размер текстовой области всегда занимает всю высоту тела, принимая во внимание миллиарды установленных пользователем панелей инструментов и т. Д., Различные разрешения монитора и, возможно даже измененные размеры окон. Ключ - простой метод JS и его размещение. Форма предназначена только для имитации обычных текстовых полей и меток.
<html>
<head runat="server"><title>Look, Mom! No Scrollbars!</title></head>
<body onload="resizeTextArea()" onresize="resizeTextArea()">
<form id="form1" runat="server">
<div id="formWrapper" style="height:200px">
<input type="text" value="test" />
<input type="text" value="test" />
</div>
<textarea id="area" style="width: 100%"></textarea>
</form>
<script type="text/javascript">
function resizeTextArea() {
//Wrap your form contents in a div and get its offset height
var heightOfForm = document.getElementById('formWrapper').offsetHeight;
//Get height of body (accounting for user-installed toolbars)
var heightOfBody = document.body.clientHeight;
var buffer = 35; //Accounts for misc. padding, etc.
//Set the height of the textarea dynamically
document.getElementById('area').style.height =
(heightOfBody - heightOfForm) - buffer;
//NOTE: For extra panache, add onresize="resizeTextArea()" to the body
}
</script>
</body>
</html>
Скопируйте и вставьте его на новую страницу. Работает как в FF, так и в IE.
Надеюсь, это поможет!